CODEWITHSUNDEEP
htmlcss
Iber
Iber

Reputation: 224

Logo on the left, while text is centered and parallel to the logo

I'm trying to put a logo on the top left corner, and text parallel to the logo (top center). The text should have the same distance from both sides of the page regardless of the logo.

I tried adding around "display: table; display: table-cell; position: relative; position: absolute;" But the best I can get is text being centered but not on the same line as the logo but a bit low.

html:

<header class="header">
  <div class="logo">
    <img src="logo.gif" alt="a logo">
  </div>
  <div class="header-text">
    Some text that is supposed to be centered in viewport
  </div>
</header>

css:

.header {
  border: 2px solid black;
  width: 100%;
}

.logo img {
  width: 80px;
}

.header-text {
  text-align: center;
}

example image:

enter image description here

Upvotes: 2

Views: 8144

Answers (4)

dig99
dig99

Reputation: 126

.header {
  border: 2px solid black;
  width: 100%;
}

.logo {
  float: left;
}

.header-text {
  text-align: center;
  position: absolute;
  width:100%;
  margin: auto;
}

.header::after {
      content: "";
      clear: both;
      display: table;
    }
<header class="header">
  <div class="logo">
    <img src="https://via.placeholder.com/75" alt="a logo">

  </div>
  <div class="header-text">
  Some text that is supposed to be centered in viewport
  </div>
</header>

As suggested in comments I have edited the text to be centred to 100% width.

Upvotes: 0

DCR
DCR

Reputation: 15665

use flexbox!

.header {
  border: 2px solid black;
  width: 100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

 img ,#spacer{
  width: 80px;
  
}

.header-text {
  text-align: center;
}
<header class="header">
  
    <img src="https://via.placeholder.com/150" alt="a logo">
  
  <div class="header-text">
    Some text that is supposed to be centered in viewport
  </div>
  <div id='spacer'></div>
</header>

Upvotes: 3

Jacob Lockard
Jacob Lockard

Reputation: 1275

There a numerous ways to go about this; I'll describe one method here.

Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.

Thus, a complete example might look like:

.header {
  /* Allows the logo to be positioned relative to the header */
  position: relative;
  /* Centers the text — can be done other ways too */
  text-align: center;
}

.header .logo {
  position: absolute;
  left: 0;
}

A JSFiddle Example: https://jsfiddle.net/g01z27tv/.

Keeping Proper Alignment

If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.

First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.

Next, create a wrapper <div> for your logo. In your case:

<header class="header">
  <div class="logo-wrapper">
    <div class="logo">
      <img src="logo.gif" alt="a logo">
    </div>
  </div>
  <!-- ... -->
</header>

Now, add some styles for .logo-wrapper. Namely:

  • cause it to expand to fill the height of the header,
  • make it a flex container,
  • make its items' vertically centered,
  • make it position: absolute, and
  • position it to the left of the header:
.logo-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
}

Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.

Lastly, in order to properly align the text, we'll use flexbox on .header:

.header {
  display: flex;
  justify-content: center; /* Use this instead of text-align: center */
  align-items: center;
}

You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.

An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.

Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.

Upvotes: 0

Nico Shultz
Nico Shultz

Reputation: 1872

You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.

I've also added some margin to show you the title stays centered

.header {
  border: 2px solid black;
  width: 100%;
  position: relative;
}

.wrapper {
  width: 100%;
  position: relative;
  margin: 30px 0;
}

.logo {
  display: flex;
}

.logo img {
  width: 80px;
}

.header-text {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
<header class="header">
  <div class="wrapper">
    <div class="logo">
      <img src="https://via.placeholder.com/150" alt="a logo">
    </div>
    <div class="header-text">
      Some text that is supposed to be centered in viewport
    </div>
  </div>
</header>

Upvotes: 3

Related Questions