I'm recreating an article I found on The Economist and I'm having trouble creating the header. Please keep in mind I'm doing this without recreating their code verbatim. I'm trying to create my own implementation.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
I'm having trouble getting the paragraph element, and ultimately its container to sit to the right as shown in the article.
Thoughts on this?
You can use display: flex; justify-content: space-between; on the element that wraps the the left/right portions of the header to put those in a row separated by the available space left over. And you can use align-items to align that content vertically.
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header__left-content {
display: inline;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
This is happening due to your class="header__site-functions" is ablock element and is taking the 100% of the width, so it doesn't fit in a line. You can use a floating element to fix it:
header {
background-color: #364043;
}
.header__content {
width: 70%;
margin: auto;
}
.header__left-content {
display: inline-block;
width: 50%;
}
.header__nav ul {
display: inline;
}
.header__nav li {
line-height: 0px;
display: inline-block;
vertical-align: middle;
}
.header__logo {
padding-right: 25px;
}
.header__nav-link {
padding-right: 15px;
}
.header__site-functions{
float:right;
}
<html>
<body>
<header>
<div class="header__content">
<div class="header__left-content">
<div class="header__nav">
<ul>
<li class="header__logo">
<img src="http://jobs.printweek.com/getasset/2eef9541-354f-4fec-8ce2-87b008f0323d/">
</li>
<li class="header__nav-link">
Topics</li>
<li class="header__nav-link">
Print Edition
</li>
<li class="header__nav-link">
More
</li>
</ul>
</div>
</div>
<!-- <div class="header__separator"></div> -->
<div class="header__site-functions">
<p>right</p>
</div>
</div>
</header>
<div class="container"></div>
</body>
</html>
Related
i have a section, and inside of it an ul with 4 li. In each li a div that are going to be cards. I want to centralize the text inside the div and put it closer to the bottom.
I tried using float: left, and then change the position with margin top and left, but i cannot centralize it.
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
Add these to .cardd2
display: flex;
align-items: center;
justify-content: space-evenly;
take note of them young padawan, you're gonna use it a lot
also add margin-bottom: 1vh; for separation
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
display: flex;
align-items: center;
justify-content: space-evenly;
margin-bottom: 1vh;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I think that this is the code that you want.
I assume that you need to have the text inside lis to be centered vertically and want it to be a bit down to the bottom.
.cards2{
text-align: center;
}
.list2{
list-style: none;
}
.list2 li{
display: inline-block;
}
.cardd2{
width: 200px;
height: 300px;
background-color: rgb(107, 255, 240);
display: flex;
align-content: center;
margin: 10px;
justify-content: center;
}
.list2 p{
text-align: center;
display: flex;
margin-top:100%;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Add the following to .cardd2:
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
.cards2 {
text-align: center;
}
.list2 {
list-style: none;
}
.list2 li {
display: inline-block;
}
.cardd2 {
width: 200px;
height: 300px;
background-color: blue;
margin-bottom: .25rem;
display: flex;
align-items: center;
justify-content: center;
}
.list2 p {
text-align: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1"><p>Sobre mim</p></div>
</li>
<li>
<div class="cardd2" id="card2"><p>Projetos</p></div>
</li>
<li>
<div class="cardd2" id="card3"><p>Habilidades</p></div>
</li>
<li>
<div class="cardd2" id="card4"><p>Contato</p></div>
</li>
</ul>
</section>
Maybe Like this:-
* {
padding: 0px;
margin: 0px;
}
.list2 {
display: flex;
positition: absloute;
align items: center;
}
<section class="cards2">
<ul class="list2">
<li>
<div class="cardd2" id="card1">
<p>Sobre mim</p>
</div>
</li>
<li>
<div class="cardd2" id="card2">
<p>Projetos</p>
</div>
</li>
<li>
<div class="cardd2" id="card3">
<p>Habilidades</p>
</div>
</li>
<li>
<div class="cardd2" id="card4">
<p>Contato</p>
</div>
</li>
</ul>
</section>
I cant see my alignment in one line. logo, menu and right menu... Please help to achieve the final output.
body {
background-color: #ffffff;
}
#wrapper {
width: 1200px;
margin-left: auto;
margin-right: auto;
/* background-color: #CDCDCD; */
}
.top-menu {
margin-top: 40px;
/* background-color: #95E659; */
}
header {
/* width: 100%; */
}
.logo {
width: 40px;
height: 40px;
}
.menu {
float: left;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
margin-right: 55px;
text-decoration: none;
color: #303030;
font: 14px lato;
}
.menu ul li:first-child {}
.menu ul li:nth-child(6) {
margin-right: 300px;
}
.search-container {
float: right;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href=""><img src="assets/images/logo.jpg" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
<li>
<img src="assets/images/user.png" alt=""> Login
</li>
<li>
<img src="assets/images/bucket.png" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
</div>
</header>
<hr>
</div>
Use flex box for inline block elements. This will also give you a lot more control over the children elements and their layout.
I altered your HTML a little, adding the center menu buttons in a parent div and separating unordered list into two unordered lists. This way we can use flex to justify their content with space-between placing them on separate ends of the parent elements block.
On the menu display: flex, we also add a flex value for each child element, the logo, the menu buttons parent div between and the login button. By placing these elements into their own parent divs, we can control the width using flex. To center the elements vertically, if our default axis for display flex is set to row, we can use the align-items property. This will align the items in that parent elements border vertically. align-items: center
The logo and login buttons parents both having a flex value of 0, which means they will take up only the space they need to show their content. The middle element, .between having a flex of 1 will mean it will take up the rest of the parent menus width. This will allow us to place a flex display on the UL elements and we can then set them on separate sides of the remaining sections width using justify-content on the UL elements parent element .between.
Snippit best if viewed in full page view as you define the width of your wrapper to 1200px.
body {
background-color: #ffffff;
margin: 0 auto;
}
#wrapper {
width: 1200px;
margin: 0 auto;
background-color: #CDCDCD;
}
.top-menu {
margin-top: 40px;
background-color: #95E659;
}
.logo {
flex: 0;
}
.logo img {
width: 40px;
height: 40px;
}
.search-container {
flex: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 2rem;
}
.between {
display: flex;
justify-content: space-between;
flex: 1;
}
.menu div ul.left {
display: flex;
justify-content: flex-start;
}
.menu div ul.right {
display: flex;
justify-content: flex-end;
}
.menu ul li {
flex: auto;
display: inline;
list-style: none;
padding: 0 1rem;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<header>
<div id="wrapper">
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<a href="">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="">
</a>
</div>
<div class="between">
<ul class="left">
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
<ul class="right">
<li>
<img src="assets/images/user.png" alt="">Login
</li>
<li>
<img src="assets/images/bucket.png" alt="">Basket
</li>
</ul>
</div>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">search</i></button>
</form>
</div>
</div>
</div>
</div>
</header>
Here's a start with flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
background-color: #ffffff;
}
#wrapper {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.top-menu {
margin-top: 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu {
display: flex;
align-items: center;
}
.logo {
width: 40px;
height: 40px;
}
.menu ul li {
display: inline;
list-style: none;
}
.menu ul li a {
text-decoration: none;
color: #303030;
font: 14px lato;
}
<div id="wrapper">
<header>
<div class="top-menu clearfix">
<div class="menu">
<div class="logo">
<img src="https://via.placeholder.com/50" alt="">
</div>
<ul>
<li>Women</li>
<li>Men</li>
<li>Kids</li>
<li>Coming Soon</li>
<li>About</li>
</ul>
</div>
<div class="menu">
<ul>
<li>
<img src="https://via.placeholder.com/10" alt=""> Login
</li>
<li>
<img src="https://via.placeholder.com/10" alt=""> Basket
</li>
</ul>
<div class="search-container">
<form action="/action_page.php">
<button type="submit"><i class="fa fa-search">s</i></button>
</form>
</div>
</div>
</div>
</header>
I want something like this:
+-------------------------------------------------------------------+
| |
| LOGO Search_box... ITEM_1 ITEM_2 ITEM_3 |
| |
+-------------------------------------------------------------------+
The LOGO is an image. Search_box is an input text and ITEM_X an orizontally list item.
I tried this, but the logo doesn't stay where I want: https://jsfiddle.net/mna4de2n/
Note: I did not implement the input text yet.
CSS:
header{
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a{
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 10%;
}
HTML:
<header>
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
Why not use flexbox?
header {
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
header img {
width: 50%;
}
header .left {
width: 30%;
}
header .right {
width: 70%;
display: flex;
justify-content: flex-end;
}
header ul {
list-style-type: none;
padding: 0.5vw;
overflow: hidden;
display: flex;
}
header li a {
color: #262626;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header input {
height: 30px;
align-self: center;
}
<header>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<input type="search">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
<header>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
I moved your logo after the right floated menu. and removed the li tag from the logo and the class for that div (float left is not needed.).
You need to set the image width to pixels, instead of percentage, this is making the parent of the image to take the full width of the header. Which is causing the issue. Also removing the li tag wrapping the image, since it is of no use.
Before:
header img {
width: 10%;
}
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
After:
header img {
width: 100px;
}
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
Note: Please view the demo in full screen to see the change.
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 100px;
}
<header>
<nav>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I have kept the li under ul, instead of div and changed the image size to pixels.
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
.left ul{
padding:0;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 3vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 80px;
}
<header>
<nav>
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I'm trying to center these images in the UL. I've looked at some of the other topics on this, but couldn't apply the solutions to my situation. If anyone can help me, I'd appreciate it. Thank you.
JSFiddle: https://jsfiddle.net/dvbL2d5y/1/
HTML
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
Please apply below css. i have removed the float property and introduce display:inline-block.
#posts-wrap {
padding: 30px 50px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
padding:0;
}
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
I have modified your code. I hope it helps. You just need to add inline-block to an element if you want to center it with the help of text-align: center tag.
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display:inline-block;
margin:0;
padding:0;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Is this what you were looking for?
#equipment-gallery li {
float: left;
list-style: none;
margin: 0 auto;
display: block;
width: 100%;
}
Remove "float:left" from this class"#equipment-gallery li" and add "display:inline-block"
#equipment-gallery li {
display: inline-block;
list-style: none;
margin: 20px;
}
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
margin: 0 auto;
display: inline-block;
padding: 0;
text-align: center;
}
#equipment-gallery li {
float: none;
list-style: none;
margin: 20px;
display: inline-block;
}
You can see link fiddler add this css https://jsfiddle.net/zdso82b7/1/
To align center I had used flexbox concept in ul tag
ul.medium-grid {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap row;
}
for more details regarding flex box, please find on CSS-Tricks A Complete Guide to Flexbox
#posts-wrap {
padding: 20px;
text-align: center;
}
ul.medium-grid {
display: flex;
justify-content: center;
flex-flow: wrap row;
}
#equipment-gallery li {
float: left;
list-style: none;
margin: 20px;
}
<div id="posts-wrap">
<div id="primary">
<div class="hentry">
<div class="entry-content">
<div id="equipment-gallery">
<ul class="medium-grid">
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
<li>
<img src="https://dummyimage.com/100.png/09f/fff">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am wondering how to center elements within a div but keep the text left aligned.
Here is a jfiddle of what I have so far. I want the text to be in the middle of the div but to maintain its left justification.
http://jsfiddle.net/MgcDU/5994/
HTML:
<div class="span4" id="middleFooter">
<div class="mcont" >
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<div class="mrow"> <li class="tcell">Contact Us</li> </div>
<div class="mrow"> <li class="tcell">About Us</li> </div>
<div class="mrow"> <li class="tcell">Copyright Information</li> </div>
<div class="mrow"> <li class="tcell">Terms & Conditions</li> </div>
</ul>
</div>
</div>
CSS:
#middleFooter {
color: #ccc2a0;
}
.mcont {
background-color: blue;
}
.mrow li {
background-color: red;
margin-left: auto;
margin-right: auto;
}
.mrow h5 {
display: table-row;
background-color: yellow;
}
.tcell {
display: table-cell;
}
You can try something like this - http://jsfiddle.net/GxgrL/
html:
<div class="span4" id="middleFooter">
<div class="mcont" >
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<li class="tcell">Contact Us</li>
<li class="tcell">About Us</li>
<li class="tcell">Copyright Information</li>
<li class="tcell">Terms & Conditions</li>
</ul>
</div>
</div>
css:
#middleFooter {
color: #ccc2a0;
}
.mcont {
background-color: blue;
}
li {
background-color: red;
display: block;
text-align: center;
}
li a {
background-color: green;
display: inline-block;
margin: 0 auto;
width: 170px;
text-align: left;
}
.mrow {
text-align: center;
}
.mrow h5 {
display: inline-block;
background-color: yellow;
text-align: left;
width: 170px;
}
You can get this effect by making the container div 50% width then floating it to the right. So in your fiddle add:
.mcont {
width: 50%;
float: right;
}
If you want to keep the blue background you'll need to wrap all the .mrow divs in a wrapper and apply the styles above so like:
<div class="mcont" >
<div class="wrapper">
<div class="mrow"> <h5 class="tcell"><b>Useful Links</b></h5> </div>
<ul>
<div class="mrow"> <li class="tcell">Contact Us</li> </div>
<div class="mrow"> <li class="tcell">About Us</li> </div>
<div class="mrow"> <li class="tcell">Copyright Information</li> </div>
<div class="mrow"> <li class="tcell">Terms & Conditions</li> </div>
</ul>
</div>
</div>
Then:
.wrapper {
width: 50%;
float: right;
}
Just assign your .mrow divs a width and give them margin:0px auto and they will be center aligned.
.mrow{
width:20%;
margin:0px auto;
}
Here's an example of your fiddle with that style added: http://jsfiddle.net/HcQcn/