I know this question had been asked many times.
Align a div to center
However, I follow their suggestion :
<center>
<div style="margin : auto; text-align: center">
Menu Item 1
Menu Item 2
Menu Item 3
</div>
</center>
(source: google.com)
By using "Center" and "Margin Auto", "Text Align Center" ... I still unable to center the menu item.
use inline-block instead of float left.
<center>
<div style="margin : auto; text-align: center">
Menu Item 1
Menu Item 2
Menu Item 3
</div>
</center>
Why not use an unordered list? After all, you are creating a list of links.
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
li {
display: inline;
}
ul {
width: 50%;
margin: 0 auto;
}
Your code works fine, but the div is 100% wide by default so you won't notice any centering.
Either give the div a width (fixed in pixels or relative in percent) or, if you just want to center the menu items, give the div a text-align setting:
<div style="margin : auto; text-align: center">
Work for me (not used float, only text-align):
http://jsfiddle.net/vnAvk/20/
<div class="a">
<p>A div Hello</p>
<p class="center">
<a class="b">B Div hello</a>
<a class="c">C Div Hello</a>
<a class="d">D div Hello</a>
<a class="e">E div Hello</a>
</p>
</div>
div.a { border: 1px solid red;}
p.center { text-align: center; }
a.b { border: 2px solid blue; }
a.c { border: 2px solid green; }
a.d { border: 2px solid black; }
a.e { border: 2px solid yellow; }
Related
I have been seriously messing with this one thing for over an hour now. Basically I have a navigation bar, there is an icon on the far left, and the links are aligning to the bottom of the image.
I have tried messing with padding, margins, line height, vertical-align and everything else I could think of. I also tried having the image inside and before the ul. I need the ul items (will be links) to be vertically aligned to the center of the icon.
I have put all the code into one file that I will copy here. Also, when you post please explain why a solution will work, not just post code. The other posts I searched for about this before I posted here didn't explain anything, just included code that didn't help when I tried it. Unfortunately, because I have no idea what the solution is or what it relates to I am including all of the code.
body {
margin: 0;
/*background-color: #10f009;*/
font-size: 62.5%;
font-family: sans-serif;
}
img {
margin: 0 0 0 0;
max-width: 100%;
height: 50%;
}
.smallSection {
margin: 100px;
}
.paragraph {
font-size: 2em;
max-width: 500px;
}
.title {
font-size: 2.4em;
}
.list {
list-style: solid inside url("");
font-size: 2em;
}
.nav-link {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 2em;
width: 200px;
border: 1px solid red;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
}
.largeSection {} #section1 {
background-image: url("../img/placeholder.jpg")
}
#nav {
border: 1px solid red;
margin: 0;
padding: 0;
align: top;
height: 100px;
line-height: 1;
}
/*temporary*/
div {
border: 1px solid red;
}
<!-- Dawn Little -->
<div id="section1" class="largeSection">
<!-- Navigation -->
<div>
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
<div class="smallSection">
<p class="paragraph">
<span class="title">Client Name<br /></span> Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
</p>
</div>
</div>
<!-- What I do -->
<div id="section2" class="largeSection">
<div class="smallSection">
<p class="paragraph">
<span class="title">What I do</span>
<ul class="list">
<li>Wellness Evaluations</li>
<li>Nutrition Coaching</li>
<li>Impact Lifestyle</li>
<li>Get Results</li>
<li>Coach Coaches</li>
</ul>
</p>
</div>
</div>
<!-- 3-day trial -->
<div id="section3" class="largeSection">
<div class="smallSection">
<p class="title">
Try Our 3-Day Trial
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Personal Wellness Coach</li>
<li>Wellness Evaluation</li>
<li>Meal Plan</li>
<li>Daily Support</li>
<li>Plan of Action</li>
<li>6 Meals</li>
<li>Metabolism Booster</li>
</ul>
</div>
</div>
<!-- Challenges -->
<div id="section4" class="largeSection">
<div class="smallSection">
<p class="title">
Join a Weight Loss Challenge
</p>
<p class="title">What you get:</p>
<ul class="list">
<li>Personal Wellness Evaluation</li>
<li>Personalized Program</li>
<li>Nutrition Classes</li>
<li>ommunity of Support</li>
<li>Accountability</li>
<li>Opportunity to Win Cash & Prizes</li>
</ul>
</div>
</div>
<!-- Become a coach -->
<div id="section5" class="largeSection">
<div class="smallSection">
<p class="title">
Become a Coach
</p>
<p class="title">
What you get:
</p>
<ul class="list">
<li>Opportunity to Change Lives</li>
<li>Opportunity for Personal & Financial Growth</li>
<li>Training</li>
<li>Potential to Change Lives in Over 90 Countries</li>
<li>Be Part of a Team</li>
<li>Get in the Best Shape You've Ever Been</li>
</ul>
</div>
</div>
This way that you are coding is a bit tricky to align.I will rewrite your code. However, I recommend you to use a CSS framework like bootstrap or zurb.
Firstly, you need to rewrite HTML part like
<!-- Navigation -->
<div class="header clearfix">
<div class="logo">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<div class="nagivation">
<ul id="nav">
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
</div>
</div>
I have added header and nagivation
then add these lines to your css to
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.header{
min-height:70px;
clear:both
}
.logo{
width:20%;
float:left;
}
.nagivation{
width:80%;
float:right;
}
you need to remove #nav also in your CSS code.
based on your needs, you can change this class
.nagivation #nav{
// add needed adjustment
}
you can have an access to all codes here https://jsfiddle.net/mhadaily/7f152z3r/
The easiest way to accomplish what you want is to simply float the icon as seen in the css below and in this pen.
#nav {
border: 1px solid red;
height:100px;
line-height:1;
display:inline-block;
}
.nav-icon {
display: inline-block;
border: 1px solid red;
float:left;
}
Floats force other elements to flow around the floated element. You just want to be wary of floats because they wreak havoc on your layout if you're not vigilant (they collapse their parent containers). You can read all about it here.
I am not a UI expert. But By looking at the following tag I can asked you few question to understand? Because You are writing non-li tags within ul. Try ti wrap your code with li tag.
Just go to w3cshool link.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
http://www.w3schools.com/html/html_lists.asp
<ul id="nav">
<div style="width:70px;height:70px;border: 1px solid red;display: inline-block;">
<!-- The img link is obviously broken so this is here instead. -->
</div>
<!-- <img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"> -->
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do </li>
What about simply moving the li elements up a little bit?
.nav-link {
position: relative;
bottom: 20px;
}
First off, the only elements that should be inside a <ul> are <li>. That <div> (or link or whatever it is in reality) may cause you grief.
The real problem, however, is that you're using the wrong CSS property on the wrong element. You want vertical-align (not "align"), and it should be applied to the list-items (not the container).
Try this:
<ul>
<li class="nav-link"><!-- img here --></li>
<li class="nav-link">Who am I</li>
<li class="nav-link">What I do</li>
<li class="nav-link">3-Day Trial</li>
<li class="nav-link">Challenges</li>
<li class="nav-link">Become a Coach</li>
</ul>
with
.nav-link { vertical-align: middle; }
Following is code:
<div class="row">
<div class="col-40">
<ul class="">
<li class="payment-type">Visa</li>
<li class="payment-type">Mastercard</li>
</ul>
</div>
<div class="col-60">60</div>
</div>
CSS
.payment-type {
background-color: lightgray;
text-align: center;
margin-top: 5px;
height: 50px;
}
AS you can see it only shows Visa rather both divs. The desired result is to to make a box like li with certain padding.
Is there any way how to make all list items of the same height? I searched this website and found this solution but it doesn't work for me if I add float:left. I need float:left for line breaks after each 4 images.
ul.Gallery{display:table-row;}
ul.Gallery li{float:left;list-style:none;margin:0 5px 5px 0;
display:table-cell;background:red;}
<ul class="Gallery">
<li><img src="image1.jpg"><p>description1</p></li>
<li><img src="image2.jpg"><p>description2</p></li>
<li><img src="image3.jpg"><p>description3</p></li>
<li><img src="image4.jpg"><p>description4 description4 description4 description4 description4 description4</p></li>
<li><img src="image5.jpg"><p>description5</p></li>
</ul>
This is what I need:
and this is what I get if some images don't have any description or description length is different.:
I can not set width or min-heigth for <li> elements because not all the images have description and description length may be very different.
I don't want to use javascript for this purpose.
Try this (edited code a bit):
ul.Gallery{display:block; padding:0; margin:0;}
ul.Gallery li{
padding:0;
background:red;
display:inline-block;
vertical-align: top;
width:23%;
margin:0 1% 5px 0;}
img {max-width: 100%; height: auto;}
http://jsfiddle.net/uR9YV/
Remove float:left and add height:100%
ul.Gallery li{
list-style:none;
margin:0 5px 5px 0;
background:red;
display:table-cell;
vertical-align: top;
height: 100%;
}
DEMO
Change float:left for display:table-cell an the li/cells will all have the same height.
Note however, that you may have to restrict the width of the li as the text will cause different widths depending on it's length.
JSfiddle Demo
CSS
ul, li {
list-style: none;
}
ul {
display: table;
}
li {
display:table-cell;
border:1px solid grey;
padding:5px;
width:20%;
}
li img {
display: block;
margin:0 auto;
}
li p {
text-align: center;
}
Here is one of realizing this layout using rather different mark-up.
The feature of this layout is that the li elements all have the same height which
means that the red backgorund has the same height with a row.
If it were not for the red background color, this problem would be a lot easier to
solve.
The HTML would look like this:
<div class="GalleryWrap">
<ul class="Gallery">
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat is wearing a fur coat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
</ul>
<ul class="Gallery">
<li>
<img src="http://placekitten.com/300/200" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat is wearing a fur coat.</p>
</li>
<li>
<img src="http://placekitten.com/150/100" />
<p>The cat in the hat.</p>
</li>
</ul>
</div>
and the CSS:
.GalleryWrap {
display: table;
width: auto;
margin: 0 auto;
border-collapse: collapse;
}
ul.Gallery {
display: table-row;
}
ul.Gallery li {
display: table-cell;
vertical-align: top;
width: 25%;
background-color: red;
border: 5px solid white;
}
ul.Gallery li img {
width: 100%;
}
ul.Gallery li p {
margin: 5px;
}
Create a the CSS table .GalleryWrap, and use display: table-row for ul.Gallery.
Within each ul.Gallery, put in the four images, and repeat for each group of four.
I added a white border to control the spacing between cells, but you can also use
cell spacing and cell padding.
In practice, the mark-up could be generated automatically using a scripting language
like PHP or the features of the template system used to build the pages of the website.
Demo: http://jsfiddle.net/audetwebdesign/DBZdf/
Note: This layout may be easier to build using flex, but flex is still rather new and supported only by the latest browsers.
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.
I'm trying to display a grid of items, with each item having a photo on the left and a description on the right, something like this:
----------------------------
| photo | item description |
----------------------------
I want to display these items in a 3x3 grid on the page. I have the grid part worked out, what I'm having trouble with is alignment of the photo and description. When the height of the description exceeds the height of the photo, I don't want the text to wrap under the photo. I essentially want to maintain two separate columns.
I have tried this:
.item{
padding-left: 60px; // size of photo + 5px margin
background-position: 5px 0px;
}
<div class="item" style="background-image: url('/img/photo123.jpg');">
Here is the item description
</div>
That has worked very well. the markup is clean and I don't have to mess around with absolute/relative, however, now I can't add a border to the image. Can anyone suggest a workaround or alternative?
IMHO that is not clean. Those are obviously content relevant images, so they shouldn't be background images.
It usually very simple with floating, but there are several other ways.
CSS:
.item img {
float: left;
}
.item p {
margin-left: 60px; // size of photo + 5px margin
}
HTML:
<div class="item">
<img src='/img/photo123.jpg'> <!-- Add width/height and alt text -->
<p>Here is the item description</p>
<div style="clear:left"></div>
<!-- or any other clearing solution, for example, "clearfix" -->
</div>
Have a look here. You just need to apply min-height on your div.
Why don't you want to use a table? This seems to me to be tabular data (admittedly with the image being a data element), so wouldn't a table would be the obvious choice?
you could use list-elements like so
<ul>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
</ul>
and the CSS
ul {width: 960px; font-family: Arial; font-size: 12px; float: left;}
ul li {width: 80px; height: 180px; padding: 10px; background: #444444; list-style: none; float: left; color: #cccccc; }
ul li.image {width: 180px; height: 180px; padding: 10px; background: #cccccc; margin: 0 20px 20px 0; color: #444444; }