Skip to main content
D
danbenner
Known Participant
April 1, 2017
Answered

Trying to vertically center an SVG logo inside a parent container

  • April 1, 2017
  • 1 reply
  • 20589 views

I am trying to vertically center the Kaiser logo on this page so it maintains the center position, despite the browser width.

I was successful getting the building background to sit center and center and cover... I got the logo to horizontally align, but after trying multiple things like padding-top as a percentage, but that didn't work... (I get why) or tried vertical-align, but that's only for inline elements... I'd set it to display: inline and it broke my horizontal positioning...

(I also have a pattern Im trying to get to overlay the building image [called bg-overlay], which did, but shows and doesn't show depending on what I'm trying out on the logo.svg. I'm putting a pin in that and trying to get the logo positioning working... so that element might be screwing something up too.)

Here's the live page

   

<div class="header_image"> 

      
        <div class="bg-overlay">
      
            <img id="kaiser_logo" src="images/svgs/logos/kaiser_logo.svg">
  
        </div>  
          
          
    </div>
      
       

CSS

.header_image {

    background: #e6e9ed url(/images/headers/kaiser.jpg);

    background-size: cover;

    background-position: center center;

    height: 400px;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

}

.bg-overlay{

  min-height:400px;

}

.header_image .bg-overlay{

  background: rgba(0,0,0,0.2) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;}

#kaiser_logo {

    width: 70%;

    margin-left: auto;

    margin-right: auto;

   

}

/*

.quote {

    background-color: #0097A7;

    max-height: 455px;

   

    width: 100%;

            z-index: -5;

}

*/

This topic has been closed for replies.
Correct answer osgood_

Oh, and nice inadvertent tip on dummyimage.com That should come in handy.


danbenner  wrote

I am trying to vertically center the Kaiser logo on this page so it maintains the center position, despite the browser width.

Use Flexbox, job done:

.bg-overlay{

display: flex;

justify-content: center;

align-items: center;

min-height:400px;

}

#kaiser_logo {

width: 70%;

}

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 1, 2017

Oh gosh, good luck with that!    Remember, designing for web is nothing like designing for print.  Print is easy because nothing changes.  Web media however is subjected to multiple variables most of which we cannot control.

You might get something close with viewport units. But don't expect miracles because different sized screens are going to carry different values.  Add media queries for different devices. 

I think I would just make a big background image with the logo inside it.   And then use background-size: cover to fill the screen.  Again, owing to different device sizes you would need more than one size background-image and media queries to target a range of device widths.

In my opinion a heck of a lot of work with very little reward.  Why do you think all web sites put their brand on the top of the page?

Nancy

Nancy O'Shea— Product User & Community Expert
    D
    danbennerAuthor
    Known Participant
    April 1, 2017

    Thanks, Nancy. I was hoping there was a similar effect I could apply to an SVG like I can with text. Ill keep poking around. I didn't think I'd need to get into breakpoints and all that... Thanks for the advice and the text link/color answer too.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    April 2, 2017

    Try this.  Copy & paste into a new, blank document.  Save & preview in browsers with min and max viewport.  The placeholder image is fixed so it's always centered on screen.  

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <style>

    body {

    width: 80%;

    background: url(http://dummyimage.com/300x300.jpg) no-repeat center center fixed;

    }

    </style>

    </head>

    <body>

    <h1>My Awesome Website</h1>

    <h2>Some Pithy Slogan</h2>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae saepe aliquam officiis recusandae laborum dolor in voluptatibus facilis minima illum, harum ipsa nemo debitis. Autem dicta accusantium odio dolorum et.</p>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae saepe aliquam officiis recusandae laborum dolor in voluptatibus facilis minima illum, harum ipsa nemo debitis. Autem dicta accusantium odio dolorum et.</p>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae saepe aliquam officiis recusandae laborum dolor in voluptatibus facilis minima illum, harum ipsa nemo debitis. Autem dicta accusantium odio dolorum et.</p>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices