CODEWITHSUNDEEP
csshtmlalignment
El Anonimo
El Anonimo

Reputation: 1880

Vertically align <p> inside a <div>

I need to vertically align text inside div#video1 and div#video2. What would be the way to approach that? Is the <p> inside the div#video1 needed or useful here? Plunkr: https://plnkr.co/edit/gZ2xRBOk52F9Z1Pi4g7m?p=preview

Here's the html layout:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <section id="video">
      <div class="container">
        <div id="video1">
                    <p>Lorem Ipsum is simply dummy text<br>Lorem Ipsum has been</p>
                </div>
        <div id="video2">
                    <p>
                        <span id="vid-pill">Text</span>
                        <br>
                        <span>Why do we use it?</span>
                        <br>
                        <span id="vid-text">Read the text</span>
                    </p>
        </div>
      </div>
    </section>
  </body>

</html>

and the css rules:

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

.container{
  width: 80%;
  margin :auto;
  overflow: hidden;
}

/* #video */
#video {
    padding: 15px;
}

#video #video1 {
    width: 70%;
    display: inline-block;
}

#video #video1 p {
    margin: 0 0 0 50%;
}

#video #video2 {
    display: inline-block;
    border-left: 3px solid #000;
    padding: 0 0 0 5%;
}

#video #video2 #vid-pill {
    background: tomato;
    display: inline-block;
    width: 40%;
    text-align: center;
    border-radius: 15px;
}

#video #video2 #vid-text {
    color: tomato;
}

Upvotes: 1

Views: 4757

Answers (2)

Hemant Kumar
Hemant Kumar

Reputation: 367

The foolproof / cross-browser solution that always works in vertically centering any element inside another element is the use of display: table/table-row/table-cell and vertical-align: middle on the child element.

Please use a table-like HTML structure like this:

<div class="like-table" style="height: 250px">
    <div class="like-table-row">
        <div class="like-table-cell valign-middle">
            <!-- Anything in this div will always get vertically center aligned -->
            <h1>This is vertically centered</h1>
        </div>
    </div>
</div>

And use the CSS:

.like-table { display: table }
.like-table-row { display: table-row }
.like-table-cell { display: table-cell }
.valign-middle { vertical-align: middle }

P.S. I use the above CSS classes in almost each of my projects.

Upvotes: 2

Anil
Anil

Reputation: 589

Please use following css to make your content vertical and horizontal center inside DIV

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

Upvotes: 0

Related Questions