What could be causing the vertical alignment issue of this logo in its parent container?

I am having an issue with the vertical centering of the logo element within the <header> container on this page. It seems to be more pronounced on mobile devices compared to desktop. However, the second element (#forum-link) is aligning correctly.

While using the flexbox rule align-items:center, I noticed that it works for one child div but not the other. Why is this happening and how can I fix it?

  html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height:116px;
}

#logo {
  margin-left: 15px;
}

#forum-link {
  max-width: 110px;
  margin-right: 35px;
}

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }
<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

Just made some edits for clarity purposes.

htmlcssresponsive-design

Answer №1

Hey there! I believe I have the solution you're looking for: centering the logo and link vertically on the background. Please note that this solution is tailored for non-mobile devices.

Just to reiterate my earlier comment, your image is not aligning vertically because it is taking the height of its parent elements: #logo and header.

The link has a smaller height compared to the header, hence appearing centered vertically.

If your concern is about the extra space at the top, consider adding display: block to the #logo's image to eliminate the spacing while maintaining the height alignment with its parents.

The approach I provided involves setting a height for the body, using flex properties to align the header vertically at the center.

[CSS code snippet]

Answer №2

Make sure to include margin: 0 within the body tag: 

  html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
  margin: 0;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height:116px;
}

#logo {
  margin-left: 15px;
}

#forum-link {
  max-width: 110px;
  margin-right: 35px;
}

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }
<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

Answer №3

To center your elements vertically, you must specify the width of your parents and add text-align: center; to the styles. Update the CSS for #logo and #forum-link as shown below:

#logo {
    flex: 1;
    width: 50%;
    text-align: center;
}


#forum-link {
  max-width: 110px;
  flex: 1;
  width: 50%;
  text-align: center;
}

I removed margins in this preview due to limited space. You can reintroduce them in your source code. See the updated code snippet below.

html {
  max-width: 780px;
  margin: 0 auto;
}

body {
  background-image: url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
  background-size: 116px;
  background-repeat: repeat-x;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}

#logo {
        flex: 1;
        width: 50%;
        text-align: center;
    }
    
    
    #forum-link {
      max-width: 110px;
      flex: 1;
      width: 50%;
      text-align: center;
    }

#forum-link a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}

@media only screen and (orientation: portrait) {
  html {
    margin: 0;
    height: 100%;
  }
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  header {
    display: block;
    width: 100%;
    position: relative;
    height: auto;
    margin-bottom: 50px;
  }
  #logo {
    margin: initial;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link {
    margin: initial;
    max-width: initial;
    background: #323232;
    height: 27px;
    position: absolute;
    bottom: -50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #forum-link a {
    font-weight: bold;
    font-size: .9em;
  }
  #forum-link a:hover {
    text-decoration: underline;
  }
<body>
  <header>
    <div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
    <div id="forum-link"><a href="/forum">Join our Forums!</a></div>
  </header>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

What could be preventing my XPath from selecting a link/button using its label text?

<a href="javascript:void(0)" title="home"> <span class="menu_icon">Possibly more content could go here</span> Home </a> When I use //a as the XPath in the above code, it is highlighted. However, when I try //a[contains(text ...

htmlxmlseleniumxpath

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

javascriptjqueryhtmlcss

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

Aligning HTML headers in a horizontal manner

Can anyone help me out here? I have a div containing 4 elements that are currently stacked on top of each other. I want them to be aligned horizontally instead. The div's ID is #ninesixty. Thank you in advance! HTML <header> <div id="ni ...

csshtmlweb

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?

After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...

htmlcss

Visual Studio is refusing to highlight my code properly, intellisense is failing to provide suggestions, and essential functions like go to definition are not functioning as expected

Due to a non-disclosure agreement, I am unable to share any code. However, I am experiencing an issue with Visual Studio not highlighting my code or allowing me to utilize its built-in tools. While I can rebuild the project, I cannot edit or access any fil ...

htmlangulartypescriptidevisual-studio-2022

Is there a method to consistently keep the horizontal scrollbar in view for the MUI Data Grid at all times?

I have a Data table with virtualized columns, totaling more than 25 in number. Users can easily scroll horizontally using a trackpad, but without one, they may struggle to access all the columns due to the delayed appearance of the scrollbar. Is there a w ...

cssreactjsmaterial-uidatagridhorizontal-scrolling

Clicking on a dynamically generated link will not result in the file being downloaded

I have a list of document names and IDs retrieved from a database, displayed in an unordered list like this: <ul id="list"> <li onmouseover="onHover(docNumber)"> <a herf="#" id="docNumber">DocName</a> </li> </ ...

javascriptjqueryhtmlajaxbase64

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

javascriptjqueryhtmlurlhashchange

Switch the checked status of an input dynamically using jQuery function

It seems like I might be overlooking something quite obvious, but I can't figure out why this jquery function is behaving inconsistently. HTML: <label id="income_this_tax_year"> <div class="left"> <p>Have you had Self-Employm ...

javascriptjqueryhtml

Finding the element and extracting its text value

Below is the HTML code: <span> <b>Order number:</b> </span> <span>A36HASJH</span> The value within the span element, A36HASJH, is dynamic and changes with each order. How can I identify this element and store it as a s ...

javahtmlseleniumxpathselenium-webdriver

Is there a way to hide the blinking cursor at the conclusion of the animation after 3 seconds?

I've been working on this HTML snippet <div class=typewriter> <h1>Lorem Ipsum</h1> </div> and included some CSS styles as well .typewriter { display: inline-block; } .typewriter h1 { overflow: hidd ...

cssfrontend

Transfer the choices from a dropdown list to a different JSP page

In my current JSP code, I have a select element that looks like the following: <select name="withoutAccess" size="5"> <c:foreach var="item" items="${obj.withoutAccess}"> <option>${item}</option> </c:foreach> </sel ...

htmlformslistjsp

My Django function doesn't get triggered by the form submission using post method

I'm facing a frustrating dilemma and issue. Currently, I am working on a form written in HTML using Django, which is meant to update information in my database related to the specific page it is on. The problem lies in the fact that the Django termi ...

htmldjango

Error found in Google's privacy page HTML code

Reviewing the html code of Google's Privacy Page, I observed the following header: <!DOCTYPE html> <html lang="en"> <meta charset="utf-8> <title>Google Privacy Center</title> <link rel="stylesheet" href="//www.g ...

htmlvalidation

What impact does CSS scaling transform have on the flow of a document?

I'm really confused about the impact of scaling an element using CSS transforms on the document flow. Take a look at this jsbin or this codepen (since jsbin seems to be down), where I have set up the following structure: p{slipsum text} #scaled #s ...

csstransform

An element featuring a background color is vertically aligned in the middle of its parent container

Struggling to achieve a seemingly simple task, but coming up short on finding a solution. The goal is to have a background-color that aligns vertically in the middle of the first and last images in a stack of images. It may sound more complicated than it a ...

javascripthtmlcssalignment

Unable to Publish HTML File

I am stumped as to why this particular file is not getting posted. Despite my thorough search for solutions, I have yet to pinpoint the issue. All the necessary ini file variables seem to be in order and I have verified the correct form type. Additionally, ...

jqueryhtmltwitter-bootstrap-3

Is there a way to eliminate the gap beneath each row of my Tic-Tac-Toe grid in Next.js with CSS styling?

What could be causing the space under every row in my CSS? I am currently developing a tic-tac-toe application using Next.js to enhance my skills. However, I have encountered an issue with the CSS where there appears to be a small space underneath each bo ...

cssnext.js