I want to make a nav bar using images but still have text under each image, yet I also want the text to be centered.
I have the following HTML
<div class="whatwedo-wrapper" id="whatwedo">
<div class="whatwedo">
<ul>
<li>
<img class="services" src="images/Brand-Online-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'">
<br>
Brand Online
</li>
<li>
<img class="services" src="images/Brand-Marketing-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Marketing-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Marketing-Circle-Blue.png'">
<br>
Brand Management
</li>
</ul>
</div>
</div>
and I have made what I have a jsfiddle here - http://jsfiddle.net/B7sdp/
The overall outcome I am looking for is for the images to be centered and the text to be underneath its image, also centred.
Thanks in advance!
You should add text-align:center property to your li and replace float:left with display:inline-block
.whatwedo li {
width: 200px;
display:inline-block;
list-style: none;
text-align:center;
}
See example here : http://jsfiddle.net/B7sdp/1/
You need to add text-align: center; to .whatwedo li
.whatwedo li {
width: 200px;
margin: 0 auto;
float: left;
text-align: center;
list-style: none;
}
JSFiddle
Related
I've build a navigation and I wanted the img and the list (ul,li) centered on the same line (vertical-align:middle;) but the list is above the img. So my question is, how I can get both centered on the same line?
HTML:
<div id="logo">
<img src=""></img>
</div>
<nav id="main-nav">
<ul>
<li>
</li>
</ul>
</nav>
CSS:
#logo, #main-nav ul li {
display: inline-block;
float: left;
margin-left: 2.5%;
position: relative;
vertical-align: middle;
}
I appreciate every comment and help!
In your CSS, you are aligning the list items, while you would want to align <nav>.
I have a ul whose cells consist of an image and a text:
<ul class="special_ul">
<li>
<img src="img/solution_icon_optimize-efficnt.png">
OTT
</li>
<li>
<img src="img/solution_icon_personal.png">
Cloud Computing
</li>
<li>
<img src="img/solution_icon_diti-cx.png">
Managed Services
</li>
<li>
<img src="img/solution_icon_biz-analitics.png">
Social Media
</li>
</ul>
css:
.special_ul li{
padding-right: 10px;
list-style-type: none;
display: inline-block;
text-align: center;
}
.special_ul li img , .special_ul li a{
display:block;
}
The problem is that the text is centered but the images are not:
(i highlighted the list with the mouse so you can see the images are not in the center)
How do I make the images centered (horizontally) as well?
You can just remove img {display: block;}, by default it is inline level, they will get centered with text-align: center; set on the container, which you already did.
Or, add margin: 0 auto; if you need to keep display: block; on the img:
.special_ul li img {
display: block;
margin: 0 auto;
}
I want to create a navbar with a logo in the center, and two navbar items (links) on either side, width equal spacing. I also need the logo to be lined up center with the navbar items.
Here's the code i have thus far. I'm using bootstrap.
HTML:
<div class="nav">
<div class="container">
<ul>
<li> Navbaritem1 </li>
<li> Navbaritem2 </li>
</ul>
<div class="logo">
<img src="Img/logo.png" class="img-responsive">
</div>
<ul>
<li> Navbaritem3 </li>
<li> Navbaritem4 </li>
</ul>
</div>
</div>
CSS:
.nav li {
display: inline;
margin-left:5%;
margin-right:5%;
}
.logo {
width: 100px;
display: inline-block;
height: auto;
}
.logo img {
float: none;
padding-top:10%;
}
ul {
display: inline;
text-align:center;
width:30%;
}
Did you try centering a div inside the container?
<div class="container">
<div class="center">
Centered content here
</div>
</div>
And the css:
.center {
display: table;
margin: 0 auto;
}
Also this post might've helped you with a quick search.
I'm trying to vertically center my text with my logo. When I use line height, it also raises my logo. How could I just raise the text so it's vertically centered with my logo? Here's my code.
HTML
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li> dfgkdfjg </li>
<li><img src="http://i.imgur.com/d0umnxt.png" /></li>
<li> pfopkp </li>
</ul>
</div>
</div>
</div>
CSS
body {
margin: 0px;
}
#header {
display: table;
width: 100%;
height: 100px;
background-color: #151B1F;
}
#nav {
display:table-cell;
vertical-align:middle;
text-align:center;
}
#nav li {
margin-left: 50px;
margin-right: 50px;
display:inline;
}
Actually you are trying to align the text which will creates problem for you; instead of aligning the text try to align the image ...
Add this in your css
#nav img {
vertical-align: middle;
}
Here is working example Link.
Try to vertical align the image instead of the text:
#nav img {
vertical-align: middle;
}
This will do the job.
not sure why, but I can't get the icons centered on the page without using padding-left:130px;
Which isn't ideal of course because the icons don't center properly when you re-size the browser window. Maybe I need more coffee, but I could use some stacker help this morning!
http://towerdive.net/
HTML
<div id="center2">
<div id="social_icons">
<p>
Thanks for your interest in our blog!
You can also find us here, as well as subscribe to our newsletter:
</p>
<ul>
<li id="facebook">
<img src="img/icon_facebook.png" alt="Facebook"/>
</li>
<li id="twitter">
<img src="img/icon_twitter.png" alt="Twitter"/>
</li>
<li id="newsletter">
<img src="img/icon_newsletter.png" alt="Newsletter"/>
</li>
</ul>
</div>
</div>
CSS
#center2 {
width: 100%;
}
#social_icons {
margin: 0 auto;
width: 400px;
height: 250px;
text-align: center;
}
#social_icons p {
color: #e3cda4;
}
#social_icons ul {
margin: 0 auto;
list-style: none;
text-align: center;
}
#social_icons ul li {
float: left;
padding-right: 10px;
}
Let me know if you guys need the full HTML or CSS!
You can use display:inline-block for this. Write Like this:
#social_icons ul li {
display: inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
padding-right: 10px;
}
You currently use floats to display your navigational list horizontally. You can't align the list-items in the middle of the unordered lists because of the floats.
Another technique is instead of float: left; using display: inline-block;. The list-items will be displayed horizontally but also all extra white-space will taken into account. You'll get extra margins between the items (like 4px). Now you can use text-align: center; on the UL to center the list-items.
There are several (easy) workouts described in this article by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/