Struggling to properly center my logo vertically

Question

Struggling to properly center my logo vertically

At my website, the logo in the top left corner is not centered. Here is the code I am using:

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
}
.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
}

I have read articles suggesting that this technique should work, but for some reason it's not working in this case. I am avoiding absolute positioning because the green area surrounding the logo decreases in smaller screen resolutions, and the logo size must adjust accordingly.

css

Answer 1

Answer №1

Here is a technique to achieve the desired result.

To center an image within a specific block, apply the display: table-cell property to the wrapping a element and inherit the width and height from its parent .header-col1.

You can then further align the image using vertical-align: middle and text-align: center, adding padding for extra whitespace if necessary.

To ensure the image responds well on different screen sizes, set its width to 100% and use vertical-align: top to fix any white space issues below the image.

.header_col1, .header_col2 {
  height: 110px;
}
.header_col1 {
  float: left;
  width: 20%;
  background: #009240 none repeat scroll 0% 0%;
  text-align: center;
  position: relative;
}
.header_col1 a {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  width: inherit;
  height: inherit;
  padding: 0 10px; /* optional if you need left/right whitespace */
}
.header_col1 a img {
  width: 100%;
  vertical-align: top;
}

<div class="header_col1">
  <a id="logo" href="#">
    <img src="http://placehold.it/262x78">
  </a>
</div>

Answer 2

Here is a technique to achieve the desired result.

To center an image within a specific block, apply the display: table-cell property to the wrapping a element and inherit the width and height from its parent .header-col1.

You can then further align the image using vertical-align: middle and text-align: center, adding padding for extra whitespace if necessary.

To ensure the image responds well on different screen sizes, set its width to 100% and use vertical-align: top to fix any white space issues below the image.

.header_col1, .header_col2 {
  height: 110px;
}
.header_col1 {
  float: left;
  width: 20%;
  background: #009240 none repeat scroll 0% 0%;
  text-align: center;
  position: relative;
}
.header_col1 a {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  width: inherit;
  height: inherit;
  padding: 0 10px; /* optional if you need left/right whitespace */
}
.header_col1 a img {
  width: 100%;
  vertical-align: top;
}

<div class="header_col1">
  <a id="logo" href="#">
    <img src="http://placehold.it/262x78">
  </a>
</div>

Answer 3

Answer №2

Perform the display table magic trick like a pro!

 .header_col1 {
   display:table;

}
.header_col1 a {    /* my logo */
    display: table-cell;
    vertical-align: middle;
}

Answer 4

Perform the display table magic trick like a pro!

 .header_col1 {
   display:table;

}
.header_col1 a {    /* my logo */
    display: table-cell;
    vertical-align: middle;
}

Answer 5

Answer №3

To align it in the middle, I'd utilize transforms.

.header_col1 a {    /* my emblem */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: .5em;
    top: 50%;
    transform: translateY(-50%);
}

UPDATE: Included padding: .5em; to provide some space around the logo on smaller screens as the container size reduces.

Answer 6

To align it in the middle, I'd utilize transforms.

.header_col1 a {    /* my emblem */
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding: .5em;
    top: 50%;
    transform: translateY(-50%);
}

UPDATE: Included padding: .5em; to provide some space around the logo on smaller screens as the container size reduces.

Answer 7

Answer №4

The latest trend is as follows:

.header_col1 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

}
.header_col1 a {    /* custom logo */
    margin: auto;
}

Keep in mind, over time, the use of vendor prefixes like -webkit- -moz- ms- will become obsolete.

Check out this example: https://jsfiddle.net/w4m50ybd/1/

On another note, resizing an image to fit the container requires different techniques, but a simple solution would be width: 100%; height: auto;.

Answer 8

The latest trend is as follows:

.header_col1 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

}
.header_col1 a {    /* custom logo */
    margin: auto;
}

Keep in mind, over time, the use of vendor prefixes like -webkit- -moz- ms- will become obsolete.

Check out this example: https://jsfiddle.net/w4m50ybd/1/

On another note, resizing an image to fit the container requires different techniques, but a simple solution would be width: 100%; height: auto;.

Answer 9

Answer №5

Give this a try

.header_col1:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.header_col1 a {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

Check out the Codepen Demo here

Answer 10

Give this a try

.header_col1:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.header_col1 a {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}

Check out the Codepen Demo here

Answer 11

Answer №6

To make this technique effective, ensure the line-height matches the height of .header_col1:

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    line-height: 110px;
}
.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
}

Make sure the image is set as a block-element:

.header_col1 a img {
    display: block;
}

Edit: Include the following for flexible sizing:

.header_col1 a {
    width: 100%;
}
.header_col1 a img {
    max-width: 100%;
}

Answer 12

To make this technique effective, ensure the line-height matches the height of .header_col1:

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    line-height: 110px;
}
.header_col1 a {    /* my logo */
    display: inline-block;
    vertical-align: middle;
}

Make sure the image is set as a block-element:

.header_col1 a img {
    display: block;
}

Edit: Include the following for flexible sizing:

.header_col1 a {
    width: 100%;
}
.header_col1 a img {
    max-width: 100%;
}

Answer 13

Answer №7

I included the line-height property within the anchor tag.

  header_col1 a {
  display: inline-block;
  vertical-align: middle;
  line-height: 10;
}

Answer 14

I included the line-height property within the anchor tag.

  header_col1 a {
  display: inline-block;
  vertical-align: middle;
  line-height: 10;
}

Answer 15

Answer №8

One effective method to align a tag both vertically and horizontally is by using the table display. This approach offers a simple way to position an element, as demonstrated on your website where it worked seamlessly.

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    display: table;
}
.header_col1 a {    /* my logo */
    display: table-cell;
    text-align: center
    vertical-align: middle;
}

Alternatively, you can also utilize padding to center your element:

.header_col1 a {
  padding: 16px 0px;
}

In order to prevent any complications when adjusting the navigation size for various devices and screen resolutions, I would suggest sticking with the first solution.

Answer 16

One effective method to align a tag both vertically and horizontally is by using the table display. This approach offers a simple way to position an element, as demonstrated on your website where it worked seamlessly.

.header_col1 {
    float: left;
    width: 20%;
    background: #009240;
    text-align: center;
    position: relative;
    display: table;
}
.header_col1 a {    /* my logo */
    display: table-cell;
    text-align: center
    vertical-align: middle;
}

Alternatively, you can also utilize padding to center your element:

.header_col1 a {
  padding: 16px 0px;
}

In order to prevent any complications when adjusting the navigation size for various devices and screen resolutions, I would suggest sticking with the first solution.

Struggling to properly center my logo vertically

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Adding a drop shadow effect to borders using CSS is a great way to

How can I incorporate margins or adjust scaling within dompdf?

Ways to position Bootstrap 4 navbar elements at the bottom

Is it possible to create a transparent colored foreground in HTML?

Challenges with moving images in Unslider

Check to see if a div element with an id that contains a numerical value has been

Occasional jquery issue causing font to render incorrectly within iframe

On smaller screens, the top placement of right sidebar links is necessary

How Bootstrap Navigation is negatively impacting the width of the website

Comparing adjust-leading-to with leader in Compass - what sets them apart?

Safari: Contenteditable div text without spaces fails to wrap around an image when focused

JQuery Parallax issue not resolved

I'm currently working on implementing custom hover animations for the navigation items in my React application, using Bootstrap nav. However, I'm facing an issue where

Eliminate the margin on the subnavigation menu

Implementing CSS classes onto HTML elements following their retrieval from a database

Is it possible to showcase dates within input text boxes prior to POSTing the form?

Preventing scrollbar-induced content shifting in Material-UI components: A guide

When the page is resized for mobile, the Bootstrap modal shifts downwards

Set the CSS position to fixed without having to reset the scroll position

Guide to selecting a checkbox using its unique identifier with a specific key press