CODEWITHSUNDEEP
css
uneeb meer
uneeb meer

Reputation: 692

padding-top to h1 in vertically align div

i have a div that has a specific height and the content inside adjusts according to height VERTICALLY now what i did is i added the property display-table; to the parent div and display: table-cell;vertical-align: middle; to the child div now what happens is my div is vertically aligned and looking good but the h1 inside the child i not exactly as centered aligned as the button i figured adding some padding top or margin top might solve the issue but it is not accepting either of these here's my code

html

<div class="all-smiles" id="parent">
    <div id="child">
    <div class="container" align="center">
        <div class="row">
                <h1>All Smiles Welcome</h1>
                <button>BOOK AN APPOINTMENT</button>
            </div>
        </div>
    </div>
</div>

css

#parent {
    display: table;
    width: 100%;
    height: 250px;
}
.all-smiles {
    background-color: #b7181c;
}
.all-smiles h1 {
    color: white;
    display: inline;
    margin-right: 3%;
}
.all-smiles button {
    padding: 12px;
    background: 0;
    color: white;
    border: 1px solid #fff;
    text-decoration: none;
    font-family: young;
}

#child {
    display: table-cell;
    vertical-align: middle;
}

FIDDLE

Upvotes: 1

Views: 185

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You need to specify these two:

  • Vertical Alignment as middle
  • Line height and 1

Code:

.all-smiles h1 {
  color: white;
  display: inline;
  margin-right: 3%;
  vertical-align: middle;
  line-height: 1;
}

Preview

preview

Fiddle: https://jsfiddle.net/wd3sr2xv/

Upvotes: 3

Related Questions