HTML/CSS Inline-block div alignment
Question
First of all I've just started writing in HTML and CSS so my question might be very simple. I've provided 2 JSFiddle links which hopefully show what my problem is. What I basically want to achieve is that my buttons div is aligned with my logo div and that they're centered horizontally. In the logo div I plan on only using a background image.
In this they seem to align but I have to use a text in the logo div.
And this is how it looks when I remove the text. (not aligned as I would want).
Here's the HTML Code
<html>
<head>
<link href="site.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Orbitron:400,700,900,500' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="logo">x</div>
<div id="buttons">
<div class="button">Button1</div>
<div class="button">Button2</div>
<div class="button">Button3</div>
<div class="button">Button4</div>
<div class="button">Button5</div>
</div>
</div>
</body>
</html>
For some reason I can't format properly the CSS code so please check the links for it.
EDIT:
#header{
width: 100vw;
min-width: 1280px;
height: 100px;
background-color: #191919;
padding: 0;
margin: 0;
border: 0;
white-space: nowrap;
}
#logo{
width: 400px;
height: 100%;
padding: 0;
margin: 0;
border: 0;
color: #ffffff;
display: inline-block;
}
#buttons{
height: 100%;
width: 800px;
padding: 0;
margin: 0;
border: 0;
display: inline-block;
}
.buttons{
height: 100%;
width: 160px;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
padding: 0;
margin: 0;
color: #ffffff;
display: inline-block;
}
2 answers
solution1
1 ACCPTED 2015-10-17 15:15:35
Try this https://jsfiddle.net/9Y7Cm/10924/
Add this to CSS
#logo {
float: left;
}
#logo img {
height: 100%;
}
EDIT
Also you will get this https://jsfiddle.net/9Y7Cm/10926/ if you remove width: 400; from #logo
EDIT 2
Center buttons https://jsfiddle.net/9Y7Cm/10927/
solution2
0 2015-10-17 15:27:13
Your HTML structure isn't particularly nice. But this code alone will get everything inline.
#header div {display:inline-block;}
Alternatively:
#logo {float:left;}
#buttons {float:left;}
#buttons .button {display:inline-block;}
This is better practice as it displays just your button list inline which provides more flexibility with your logo and other elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.