CODEWITHSUNDEEP
htmlcsscenter
sanjihan
sanjihan

Reputation: 6014

How to center text vertically if line break occurs

Basically the question I have is about text inside a container. When the screen size gets smaller, it breaks into the next line. At that point, it is no longer centered vertically, because a new line appeared.

How can I keep it vertically centered?

<div class="low">
  <h4 class="title"> Text to be centered. </h4>
</div>

I usually adjust padding for every line break, but that is cumbersome and time consuming. There is got to be a better way.

Upvotes: 13

Views: 20026

Answers (3)

Matt
Matt

Reputation: 4117

You can set the text-align property to center. However if the width of the container is such that it's contents cannot be centrally aligned it will fail.

.low {
    width: 50px;
}

.title {
    text-align: center;
}
<div class="low">
     <h4 class="title"> Text to be centered. </h4>
</div>

https://jsfiddle.net/4oacwqcp/

Upvotes: 2

Mohamed Mohaideen AH
Mohamed Mohaideen AH

Reputation: 2545

Try this

div {
    display: table;
    background-color: #ccc;
    height: 50px;
}

h4 {
    display: table-cell;
    vertical-align: middle;
}
<div class="low">
    <h4 class="title"> Text to be centered. </h4>
</div>

Upvotes: 1

Muhammad Shaharyar
Muhammad Shaharyar

Reputation: 1104

You can use display: flex; to make it vertically centered:

.low {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center; 
}

Upvotes: 16

Related Questions