I have to center all elements in div.to_left_60. I need solution that will work for all elements inside there.
I have set text-align: center for this purpose. It works for text, but not for my ul element. I have tried to play with margins and absolute/relative, but no luck.
ul.problem is the element I have to center in this div. From jsfiddle you see that white background is not centered.
HTML
<div class="to_left_40">gtestsetes</div>
<div class="to_left_60">
<p>gtestsetes</p>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTvZsT7cLwPFCC0joFhZoi6OylhGaIVHBPYn--PrH3nzZdMwH0grA" width="265px" />
<ul class="problem">
<li>fsfsd</li>
<li>fsfsd</li>
</ul>
<ul>
<li>fsfsd</li>
<li>fsfsd</li>
</ul>
CSS
ul {
list-style: none;
text-align: justify;
background-color: yellow;
}
ul.problem li {
list-style-type: none;
display: block;
width: 245px;
height: 164px;
padding: 14px 10px 0 10px;
background-color: white;
background-repeat: no-repeat;
text-align: center;
font-size: 18px;
}
.to_left_40 {
float: left;
width: 40%;
background-color: red;
}
.to_left_60 {
float: left;
width: 60%;
background-color: green;
text-align: center;
}
JSFiddle: http://jsfiddle.net/qVTQ4/
EDIT: (SOLLUTION)
This helps:
ul.problem li{margin:0 auto;}
I have modified this sollution:
.to_left_60 * {
margin:0 auto;
}
try this way
ul.problem li{margin:0 auto;}
Demo
Have a look at this - http://jsfiddle.net/2y7R8/
All I did was set a width on the ul and add margin: 0 auto to center it.
Try Box-align
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
Try removing
ul
{
text-align: justify;
}
i.e
ul {
list-style: none;
background-color: yellow;
}
Try this
ul.problem li {
margin:0 auto;
}
This can set ui block in center. It make equal margin from both sides.
You can declare ul { padding:0; } Looks like your li's are centered but parent ul has default padding.
Related
I want to my nav-bar width fit automatically.
Here is part of my CSS
#nav-bar {
width: 960px;
margin: 0 auto;
}
Here is my whole working code
http://codepen.io/anon/pen/ogBxxN
Here is my result
When I adjust the width to 900, this is what I see
When I adjust the width to 1000, this is what I see
As you can see, none of them give me the best result.
I was wondering maybe some CSS expert can help me fixing this issue.
This should do it for you using flexbox
#nav-bar ul {
width: 100%;
margin: 0;
padding: 0;
border: 1px solid #c2c2c2;
float: left;
display:flex;
flex-direction:row;
}
#nav-bar li {
text-align: center;
float: left;
order:1;
flex-grow:1;
}
by the way you are styling the list items twice, with .inline li and #nav-bar li
Demo
Trying adding white-space: nowrap; to your ul element and only use display: inline-block; on your li elements as opposed to the float: left; that is there.
Example:
http://codepen.io/jessikwa/pen/YPNqpw
Using table layout:
*{margin:0;padding:0;}
#nav-bar ul {
width: 100%;
border: 1px solid #c2c2c2;
display:table;
white-space:nowrap;
text-align:center;
}
#nav-bar li { display:table-cell; }
#nav-bar li a{
position:relative;
display:block;
background:#eee; /*put back your gradients here */
line-height: 40px;
height: 41px;
font-size: 20px;
color:#000;
padding: 0 10px;
}
<div id="nav-bar">
<ul class="inline">
<li>Europe</li>
<li>Asia</li>
<li>North America</li>
<li>Oceania</li>
<li>South America</li>
<li>South America</li>
</ul>
</div>
That's it.
Using your current code, in your CSS:
.inline li {
width: 16.666%;} // 100 divided by number of items
#nav-bar li a {
padding: 0;} // remove the padding
I have the following HTML:
<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
<div id="divEachImage">
<div id="slides">
<div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
</div>
<div id="menu">
<ul class="ulText">
<li class="menuItem act">PS: BASICS</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
.col {
/*display: block;*/
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
.setCenter {
text-align: center;
}
#divEachImageExt {
float: left;
width: 30%;
margin: 0 auto;
}
#divEachImage {
/* CSS3 Box Shadow */
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
/* CSS3 Rounded Corners */
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;
/* The width of the divEachImage */
width:175px;
overflow:hidden;
margin: 0 auto;
}
#slides {
/* This is the slide area */
height:155px;
/* jQuery changes the width later on to the sum of the widths of all the slides. */
width:175px;
overflow:hidden;
margin: 0 auto;
}
.inta {
float:left;
width: 175px;
margin: 0 auto;
height: 140px;
padding-top: 8px;
}
#menu {
/* This is the container for the thumbnails */
height:45px;
}
ul.ulText {
margin:0px;
padding:0px;
}
ul.ulText li {
/* Every thumbnail is a li element */
width:125px;
display:inline-block;
list-style:none;
height:45px;
overflow:hidden;
line-height: 45px;
vertical-align: middle;
}
li.inact:hover {
/* The inactive state, highlighted on mouse over */
background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
cursor:default;
}
ul.ulText li a {
display:block;
background:url('../theImages/divider.png') no-repeat right;
height:35px;
padding-top:10px;
}
What happens is, the inner DIV is left aligned instead of being centered.
Here is a F12 Dev Tool screenshot:
Add display: inline-block to an element you want to be centered.
Heres the fiddle for you: http://jsfiddle.net/u26wqssb/
And heres the code:
Sample HTML:
<div class="setCenter">
<div class="centerMe"></div>
</div>
and CSS:
.setCenter {
width:100%;
text-align:center;
background: #eee;
}
.centerMe {
width:100px;
height:100px;
background:red;
display:inline-block;
}
If you add a fiddle for your case we can fix it there.
Hey You can Try using the margin to center it like so
.yourstyle {
margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */
}
or you could attempt to use CSS3 2D transforms to center it or just Flex box good luck
Is there any reason for the float in #divEachImageExt? If no the either
/* .setCenter part not needed */
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
or
.setCenter {
text-align: center;
}
#divEachImageExt {
display: inline-block;
width: 30%;
}
will do.
change #divEachImageExt to below code
#divEachImageExt {
width: 30%;
margin: 0 auto;
}
remove float:left
It will solve your problem.
I would like to align logo image with navigation bar so that logo is on left and navigation bar at the center. You can see here what I have tried: http://jsfiddle.net/4fTwh/
HTML:
<body>
<div class="navigation">
<p> <img class="logo-img" src="http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png" alt="Logo">
<ul id="nav-list">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</p>
</div>
</body>
CSS:
.navigation{
width: 100%;
text-align: center;
background-color: #CEE3F6;
}
#nav-list{
list-style-type: none;
}
#nav-list li{
display: inline;
font-size: 18px;
margin: 20px;
}
.logo-img{
float: left;
margin: 0px 15px 15px 0px;
}
Now, I would like for navigation bar text to be bottom aligned with logo image. And also that colored background to be height of the image (not lower around navigation bar text, as it is now). So basically, how to wrap together logo(on left) and navigation bar(centered) so that background is height of higher of these two elements?
Try like this: DEMO
.navigation {
width: 100%;
text-align: center;
background-color: #CEE3F6;
vertical-align:bottom;
line-height:120px;
height:120px;
}
#nav-list li {
display: inline-block;
font-size: 18px;
margin: 20px;
vertical-align:bottom;
line-height:normal;
}
.logo-img {
position:absolute;
left:10px;
top:10px;
margin: 0px 15px 15px 0px;
}
You looking for something like this?
#nav-list{
list-style-type: none;
background: url('http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png') no-repeat;
padding: 102px 0 0 0;
}
http://jsfiddle.net/4fTwh/2/
You can try this:
Demo
.logo{
display:inline-block;
float:left
}
#nav-list{
margin-top:55px;
list-style-type: none;
float:left; display:inline-block;
}
In your HTML I would remove the <p> tag. It doesn't add any value here.
You CSS is almost there. Below are the alterations I made to it.
.navigation{
width: 100%;
text-align: center;
background-color: #CEE3F6;
overflow: hidden /* This Allows for the Background to span the entire height */
}
#nav-list{
list-style-type: none;
float: left; /* Keeps the elements side by side*/
margin-bottom: 0 /* fix the spacing to allow the menu to be at the bottom */
}
#nav-list li{
float: left; /* allows the li tags to be side by side. */
font-size: 18px;
margin: 20px 20px 0 0; /* Fixed a little of the spacing, etc. */
padding:69px 0 0 0 /* Moved the LI down to be at the bottom*/
}
.logo-img{
float: left;
margin: 0px 15px 0 0px; /* fixed the spacing. */
}
Here is the jsFiddle
Since the code is long I have fiddle for it
<header>
<div>
</div>
</header>
FIDDLE: http://jsfiddle.net/9zWm9/34/
Q: Can you please tell why my list items are not aligning to the navigation inside header-box.
Requirement: I want my list items to be exactly in center of header-box with the line-height of 3em.
Thanks in advance.
To align your ul horizontally you need to clear the float, I've done that using a br element with class="clear"
.clear { clear:both; }
and to position the s vertically I used position:relative; with top:15%;
check out this fiddle
And here's another way if you don't want to set position on the li elements, this way you should set a line-height on your ul element (instead of height).
check out this fiddle
Remove the position:relative for the .header-box and add overflow: hidden. Remove the height specified for .header-box, header nav and header nav ul and add padding to header nav ul
Check this fiddle
CSS changes
.header-box {
/* top: 40px; */
width:100%;
/* height: 81px; */
/* position: relative; */
overflow:hidden;
}
header nav{
border: 1px solid black;
/* height: 81px; */
}
header nav ul{
width:100%;
/* height: 81px; */
margin:0px auto;
/* padding:0px; */
padding:15px 0px;
text-align:center;
}
Yes, problem is the line-height. A possible solution is changing the line-height to 1:
font: 18px Verdana;
display: inline-block;
list-style-type: none;
text-align:center;
line-height: 1;
border: 1px solid red;
http://jsfiddle.net/9zWm9/35/
Set your following class to "line-height: 1em;"
header nav ul li {
border: 1px solid #FF0000;
display: inline-block;
font: 18px Verdana;
list-style-type: none;
text-align: center;
line-height: 1em;
}
I need to make a menu that on mobile has the links expand to full width. Something similar to this wireframe.
My code so far:
HTML
<div id="shortcuts">
<ul>
<li>Categories</li>
<li>Archives</li>
</ul>
</div>
CSS
#header {
width: 100%;
height: 180px;
background-color: #666;
color: #fff;
}
#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }
#shortcuts ul {
display: table;
width:100%;
height: 180px; /* for testing only */
}
#shortcuts ul li {
list-style: none;
display: table;
height: 60px;
width:100%;
display: block;
vertical-align: middle;
background-color: red; /* for testing only */
border: blue 3px solid; /* for testing only */
}
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: table-cell;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
This is my result so far (colors used only for testing)
If I change the #shortcuts ul li a to display: block;, I can get the desired width. But then the text will not center vertically.
Not a duplicate of CSS Positioning anchor inside li vertically aligned because that is only partial part to vertically align the text. Does not answer how to make the link expand 100% width.
You need to use both "display: block;" and "line-height:60px;" for "#shortcuts ul li a {"
Updated code:
#shortcuts ul li a {
width: 100%;
height: 60px;
text-decoration: none;
display: block;
line-height:60px;
vertical-align: middle;
border: 2px dashed green; /* for testing only */
}
Please refer the fiddle :- http://jsfiddle.net/aasthatuteja/6WEW6/