-5

How to vertically center text inside p? Thank you. enter image description here

DmitryVlasov
  • 13
  • 2
  • Learn about CSS Flexbox from here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox – Bhawna Saroha Dec 07 '20 at 08:04
  • 2
    Does this answer your question? [How do I vertically align text in a paragraph?](https://stackoverflow.com/questions/11051951/how-do-i-vertically-align-text-in-a-paragraph) – Daweed Dec 07 '20 at 08:04
  • Flexbox solution - the more modern solution: https://jsfiddle.net/2zqeL6g8/ CSS table solution - older method but works in older browsers ie8+: https://jsfiddle.net/2zqeL6g8/2/ – mjwals Dec 07 '20 at 09:12

2 Answers2

0

Flexbox solution - the more modern solution:

https://jsfiddle.net/2zqeL6g8/

The HTML:

<div class="todo">
  <div class="todo-left">
    <p>TODO 1</p>
  </div>
  <div class="todo-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
  </div>
</div>

The CSS:

.todo {
  display: flex;
}

.todo-left {
  background: #ccc;
  padding: 0 15px;
  flex: 0 0 100px;
  
  display: flex;
  align-items: center;
}

.todo-right {
  background: #f5f5f5;
  padding: 0 15px;  
  flex: 1;
  
  display: flex;
  align-items: center;
}

CSS table solution - older method, but works in older browsers ie8+:

https://jsfiddle.net/2zqeL6g8/2/

The HTML:

<div class="todo">
  <div class="todo-row">
    <div class="todo-cell-left">
      <p>TODO 1</p>
    </div>
    <div class="todo-cell-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
    </div>
 </div>
</div>

The CSS:

.todo {
  display: table;
  border-collapse: collapsed;
  width: 100%;
}

.todo-row {
  display: table-row;
}

.todo-cell-left,
.todo-cell-right {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px;
}

.todo-cell-left {
  background: #ccc;
  width: 100px;
}

.todo-cell-right {
  background: #f5f5f5;
}
mjwals
  • 152
  • 2
  • 13
0

.todo {
  display: flex;
}

.todo-left {
  background: #ccc;
  padding: 0 15px;
  flex: 0 0 100px;
  height:100px;
  
  display: flex;
  align-items: center;
}

.todo-right {
  background: #f5f5f5;
  padding: 0 15px;  
  flex: 1;
  
  display: flex;
  align-items: center;
}
<div class="todo">
  <div class="todo-left">
    <p>TODO 1</p>
  </div>
  <div class="todo-right">
    <p>Lorem ipsum dolor sit .</p>
  </div>
</div>
Jone
  • 150
  • 7
  • 1
    Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes – Ran Marciano Dec 07 '20 at 12:26