CODEWITHSUNDEEP
htmlcssvertical-alignment
edd
edd

Reputation: 21

Vertical align of <p> text inside <div>

Right, let me get right down to business:

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
}

div {
    display: inline-block;
    float:left;
    height: 4em;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}

And here's the html:

<div>      
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>

I can't figure out how i can vertical align the p in div when p has multiple lines of text. How do i do it ?

Upvotes: 0

Views: 162

Answers (2)

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

Here is complete guide about centering elements. There are few sollutions:

  • old method, use table:

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
}

.table {
    display: table;
    height: 400px;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    vertical-align: middle;
}
<div class="table">
    <div class="row">
        <div class="cell">
            <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        </div>
    </div>
</div>

  • Use flexbox

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
}

.flex {
    display: flex;
    height: 400px;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
    align-items: center;
}
<div class="flex">

            <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

  • use transformation on absolut positioned element

p {
    margin:0px;
    padding:0px;
    text-align: justify;
    font-weight: normal;
    font-size: 0.8em;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.relative {
    position: relative;
    height: 400px;
    width: 20%;
    margin: 0px ;
    padding: 0px;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}
<div class="relative">
    <p>content goes here</p>  
</div>

I would go with flexbox approach

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46785

You could try the following.

Apply display: table-cell to the p element and then use the vertical-align: middle rule to get the vertical alignment that you need.

Note that I increased the height of the parent block to show the effect.

p {
  margin: 0px;
  padding: 0px;
  text-align: justify;
  font-weight: normal;
  font-size: 0.8em;
  display: table-cell;
  vertical-align: middle;
  height: inherit;
}
div {
  display: inline-block;
  float: left;
  height: 12em;
  width: 20%;
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
  font-weight: bold;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
  margin-top: 1px;
  margin-bottom: 1px;
  border: 1px dotted blue;
}
<div>
  <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

Upvotes: 1

Related Questions