[Solved] CSS Center text inside paragraph [duplicate]

by


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;
}

solved CSS Center text inside paragraph [duplicate]