Center the elements in the header div, including the text and logo, in a vertical alignment

Question

Center the elements in the header div, including the text and logo, in a vertical alignment

I struggle with CSS and often get stuck, even on simple layout questions. I'm currently reading a book but still can't figure out how to design a website with a header at the top, followed by a menu bar and content. However, I want the header to have text on the left and a logo on the right.

My approach so far:

<div id="headline">
<div id="headertext">Some title<br/>some more title text</div>
<div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" /></a></div>
</div>

CSS code:

  #headline { overflow: hidden;
            height: 224px;
            text-align: left;
            padding: 0px 80px 0px 80px;
          }

  #headertext { font-family: "Trebuchet MS", Helvetica, sans-serif;
          font-size: 20pt;
          color: #000000;
          float: left;
          font-weight: bold;
        }
  #logo    { 
          float: right;
        }

I've successfully floated the text and logo to the left and right sides, respectively. Now, I want to vertically align both elements in the center of the parent <div> with a specific height.

Desired outcome (blue rectangle represents the logo):

I've tried using vertical-align: middle, but it hasn't worked. I also experimented with display:table-cell and display:inline, but they didn't yield the desired result. Should I add another wrapping <div> inside the headline element?

Edit: thanks for the fiddle suggestion; here's my attempt: http://jsfiddle.net/f5vpakdv/

Appreciate your assistance!

html css vertical-alignment

Answer 1

Answer №1

You can achieve a centered layout using display: table and display: table-cell, along with vertical-align: middle.

I have simplified your original CSS to highlight the key differences.

If you want your layout to adjust perfectly even after adding padding or margin, refer to this link: Box Sizing | CSS-Tricks.

<div id="headline">
    <div id="headertext">
        Some title<br/>some more title text
    </div>
    <div id="logo">
        <div id="fakeImg"></div>
    </div>
</div>

...

#headline {
    width: 100%;
    height: 224px;
    background: yellow;
    display: table;
}
#headertext {
    text-align: left;
}
#headertext,
#logo {
    display: table-cell;
    width: 50%;
    vertical-align: middle;

}
#fakeImg {
    width: 100px;
    height: 100px;    
    background: blue;
    float: right;
}

View Demo

Answer 2

You can achieve a centered layout using display: table and display: table-cell, along with vertical-align: middle.

I have simplified your original CSS to highlight the key differences.

If you want your layout to adjust perfectly even after adding padding or margin, refer to this link: Box Sizing | CSS-Tricks.

<div id="headline">
    <div id="headertext">
        Some title<br/>some more title text
    </div>
    <div id="logo">
        <div id="fakeImg"></div>
    </div>
</div>

...

#headline {
    width: 100%;
    height: 224px;
    background: yellow;
    display: table;
}
#headertext {
    text-align: left;
}
#headertext,
#logo {
    display: table-cell;
    width: 50%;
    vertical-align: middle;

}
#fakeImg {
    width: 100px;
    height: 100px;    
    background: blue;
    float: right;
}

View Demo

Answer 3

Answer №2

To achieve this, you can utilize CSS along with vendor-specific transforms for better results.

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

For a working example, I have created a fiddle and included an additional div wrapper.

http://jsfiddle.net/5o3xmfxn/

You can view the updated version of your fiddle here:

http://jsfiddle.net/f5vpakdv/1/

Answer 4

To achieve this, you can utilize CSS along with vendor-specific transforms for better results.

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

For a working example, I have created a fiddle and included an additional div wrapper.

http://jsfiddle.net/5o3xmfxn/

You can view the updated version of your fiddle here:

http://jsfiddle.net/f5vpakdv/1/

Answer 5

Answer №3

Your fiddle has been enhanced here. I included the property display:table; to the outer div and applied the styles

display:table-cell;
vertical-align:middle;

to both inner divs.

Additionally, I created another version using flexbox which can be found here.

To achieve this layout, I added the following CSS properties to the parent div:

display:flex;
align-items:center;
justify-content:space-between;

Answer 6

Your fiddle has been enhanced here. I included the property display:table; to the outer div and applied the styles

display:table-cell;
vertical-align:middle;

to both inner divs.

Additionally, I created another version using flexbox which can be found here.

To achieve this layout, I added the following CSS properties to the parent div:

display:flex;
align-items:center;
justify-content:space-between;

Answer 7

Answer №4

For an easier solution, consider wrapping the content you want to center in a wrapper and using a margin-top. Here is an example: http://jsfiddle.net/f5vpakdv/2/

<div id="headline">
    <div id="wrapper">
        <div id="headertext">Some title some
            <br/>more title text</div>
        <div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" width="198px" height="120px" /></a>
        </div>
    </div>
</div>

CSS

 #wrapper {
      margin-top: 60px;
  }

Answer 8

For an easier solution, consider wrapping the content you want to center in a wrapper and using a margin-top. Here is an example: http://jsfiddle.net/f5vpakdv/2/

<div id="headline">
    <div id="wrapper">
        <div id="headertext">Some title some
            <br/>more title text</div>
        <div id="logo"><a href="http://www.example.com/~somelink"><img src="somelogo.png" width="198px" height="120px" /></a>
        </div>
    </div>
</div>

CSS

 #wrapper {
      margin-top: 60px;
  }

Center the elements in the header div, including the text and logo, in a vertical alignment

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Extracting Table(Array) Index into a Component in Angular

Div Boxes at the Center

Combining four numbers to calculate a total with the click of a button

Display a DIV element containing a button using Jquery

Effective methods for increasing the height of a column div upon hovering, while also maintaining the position of surrounding columns

A guide to programmatically downloading a file with JavaScript on Internet Explorer

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled

Is it possible for ColdFusion to transmit HTML5 Server-Sent Events using utf-8 encoding?

What is causing iframes to fail on some websites?

The button text in Bootstrap 5 is black instead of white as shown in their demo

Issue encountered while trying to interpret Bootstrap 4 within Netbeans 8.2

How to override an event in JavaScript when a specific value is entered

How can I use CSS to place a div at the bottom of its container?

Preventing a draggable item from being dropped into a sortable container when the maximum count has been reached

I'm curious about why I'm receiving the error "Unable to bind to 'ngFor' since it is not recognized as a property of 'li'. Can someone please explain why this is happening?

Generating an Array using Jquery

the toggle feature is not functioning properly on smartphones and tablets

Guide to configuring a bootstrap checkbox using the razor CheckBoxFor() method

Tap on the Dropdown Menu to access the Responsive design feature

Ways to navigate through a webpage without encountering any overflow issues