Trying to vertically center an SVG logo inside a parent container

Report · Apr 01, 2017

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;

}

*/

Report · Apr 01, 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 & Moderator

Report · Apr 01, 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.

Report · Apr 01, 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>

<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 & Moderator

Report · Apr 01, 2017

Yep, that's the deal. I'll give this a shot. Thanks, Nancy!

I Codepenned it in case anyone else is looking to see how it works:

https://codepen.io/danbenner/pen/WpPpwJ

Report · Apr 01, 2017

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

Report · Apr 02, 2017

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%;

}

Report · Apr 02, 2017

Indeed. I was turned on to that last night from a session with codementors. Id thought prior flexbox was a plugin or jquery function, but it's built right in. Worked like a charm. Thanks for the answer!

Report · Apr 02, 2017

Dont forget to add in the 'ugly' browser prefixes so it works across all modern browsers, complete css/prefixes below:

.bg-overlay{ display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height:400px; }

Report · Apr 02, 2017

Thank you. That didn't even cross my mind. Will do.

Trying to vertically center an SVG logo inside a parent container

1 Correct answer