I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>
Related
I have this nav bar:
<div id="nav">
Portfolio
<img src="assets/zslogoblack.png">
Contact
</div>
Styled as so:
#nav {
position: fixed;
width: 100%;
}
#nav a {
text-align: center;
display: inline-block;
width: 33%;
}
#nav a:first-of-type,#nav a:last-of-type {
line-height: 60px;
}
#nav img {
height: 60px;
}
Here is the output
I need everything to be vertically aligned within a fixed navbar that is 60px tall, but for some reason, this is not happening. I thought the problem was caused by
line-height:60px;
being applied to the anchor that contained the image, hence the
#nav a:first-of-type,#nav a:last-of-type {
line-height: 60px;
}
But that did not fix the problem. Any help would be very much appreciated.
Try adding 'display:flex;' to '#nav':
#nav
display:flex;
align-items: center;
}
Here is a working example:
#nav {
position: fixed;
width: 100%;
display:flex;
align-items: center;
}
#nav a {
text-align: center;
display: inline-block;
width: 33%;
}
#nav a:first-of-type,#nav a:last-of-type {
line-height: 60px;
}
#nav img {
height: 60px;
}
<div id="nav">
Portfolio<img src="/" style="background:#000;width:50px;">Contact
</div>
I have the following elements. The image is fixed at 325X70px and is placed at the top left corner. I want the list items, evenly spaced, to fill the remainder of the width and be responsive to browser resize. I'm sure this is easy, but I can't seem to get it to work.
<div class="wrapper">
<div class="left">
<div class="image">Image Here</div>
</div>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>A</li>
</ul>
</div>
</div>`
CSS
* {
padding: 0px;
margin: 0px;
}
.wrapper {
position: relative;
}
.left {
float: left;
}
.image {
min-width: 325px;
max-width: 325px;
height: 70px;
background-color: red;
}
.menu {
width: 100%;
height: 70px;
background-color: black;
}
.menu ul {
position: absolute;
width: 100%;
height: 70px;
display: table;
}
.menu li {
color: #FFF;
width: 25%;
text-align: center;
vertical-align: middle;
display: table-cell;
list-style-type: none;
}
You may not need the .left class, you might be able to just do that styling on the image itself, but regardless, what needs to happen here is that .left and .menu need to be side by side. To do that...
.left,
.menu {
display: inline-block;
vertical-align: middle;}
We know the image is always 325px wide, so let's set the parent container to match...
.left {
width:325px;}
And then we want .menu to be the entire width of the screen, minus that image/container, so can we do this...
.menu {
width: calc(100% - 325px);}
You'll still have to turn your li horizontal...
li {
display: inline-block;
vertical-align:middle;}
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
I have a vertical navigation menu, with a picture next to it. So now the navigation menu and the pic are vertically aligned to the top. I want it to be bottom, like, the navigation menu to vertically finish at the same point where the image does. How do I go about doing this with using absolute positioning?
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="pic.jpg">
CSS:
ul {
float: left;
text-align: right;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
float: left;
}
I don't want to use absolute positions, because the image is supposed to interconnect with the navigation menu (It's supposed to be a png picture of a guy with the buttons coming from behind him) so I'm worried it might mess things up if someone had a different font sizing in their browser.
You can use display: table; to achieve this.
Create a wrapping element for the ul and img and give it display: table;. ul and img should have display: table-cell; vertical-align: bottom; then. You don't need float: left; on ul or img either if you do it this way.
Demo: http://jsfiddle.net/xq6SY/
HTML
<div class="wrapper">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
</ul>
<img src="pic.jpg">
</div>
CSS
.wrapper {
display: table;
}
ul {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 300px;
height: auto;
display: table-cell;
vertical-align: bottom;
}
try this code even though I pressed it to the bottom of the screen)) DEMO
<div class="page-wrap">
</div>
<footer class="site-footer">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Portfolio</li>
<li>Reviews</li>
</ul>
<img src="http://placehold.it/350x300">
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
/*height: 142px; */
}
.site-footer {
background: white;
}
ul {
/*float: left;*/
text-align: right;
display:inline-block;
}
ul li {
padding-top: 5px;
}
ul li a {
background: yellow;
display: inline-block;
padding: 10px 35px;
font-size: 20px;
}
img {
width: 230px;
height: auto;
display:inline-block;
vertical-align:bottom;
}
You can do this:
fiddle
css
ul, img { display:inline-block; vertical-align:bottom;}
** Important: Don't forget to remove your floats, and add padding:0; margin:0; to your UL.
(look at the fiddle)
I need to center html content inside a div class="partners" (top div with 2 images). As you can see from the image below (it floats left instead of center of the div):
This is my html code:
<div id="partners">
<div class="wrap clearfix">
<h2>Partnertnerzy serwisu:</h2>
<ul>
<li><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></li>
<li></li>
</ul>
<a class="linkClose" href="/firmy?clbp=1">Zamknij </a>
</div>
</div>
Image:
CSS:
#partners, #top {
position: relative;
z-index: 100;
}
#partners {
margin: 12px 0 3px;
text-align: center;
}
.clearfix:after, .row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#partners .wrap {
width: 655px;
}
.wrap {
margin: 0 auto;
position: relative;
width: 990px;
}
#partners h2 {
color: #A6A5A5;
float: left;
font-weight: normal;
margin: 2px 15px 0 0;
}
#partners ul {
float: left;
}
ul {
list-style-position: outside;
list-style-type: none;
}
To center a div, set it's width to some value and add margin: auto.
#partners .wrap {
width: 655px;
margin: auto;
}
EDIT, you want to center the div contents, not the div itself. You need to change display property of h2, ul and li to inline, and remove the float: left.
#partners li, ul, h2 {
display: inline;
float: none;
}
Then, they will be layed out like normal text elements, and aligned according to text-align property of their container, which is what you want.
There are many ways to center any element. I listed some
Set it's width to some value and add margin: 0 auto.
.partners {
width: 80%;
margin: 0 auto;
}
Split into 3 column layout
.partners {
width: 80%;
margin-left: 10%;
}
Use bootstrap layout
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">Your Content / Image here</div>
</div>
You just need
.parent-div { text-align: center }
Try using flexbox. As an example, the following code shows the CSS for the container div inside which the contents needs to be centered aligned:
Depending on the axis of the flexbox, you will need to align or justify items, read more at MDN
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
}
in parent div
parentDiv: {
display:flex;
height:100%;
width:100%;
justify-content:center;
align-items:center;
}
You just do CSS changes for parent div
.parent-div {
text-align: center;
display: block;
}
The problem is that you assigned a fixed width to your .wrap DIV. The DIV itself is centered (you can see that when you add a border to it) but the DIV is just too wide. In other words the content does not fill the whole width of the DIV.
To solve the problem you have to make sure, that the .wrap DIV is only as wide as it's content.
To achieve that you have to remove the floating in the content elements and set the display property of the block levels elements to inline:
#partners .wrap {
display: inline;
}
.wrap { margin: 0 auto; position: relative;}
#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}
#partners ul {
display: inline;
}
#partners li {display: inline}
ul { list-style-position: outside; list-style-type: none; }
do like this :
child{
position:absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
After 2022.
Here is your class to center content both vertically and horizontally.
.center {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}