So I have a simple list thats set out like below
<ul class='my-videos'>
<li>
<a class='show-more' href='' title=''>Show More</a>
</li>
<ul>
I am trying to get the .show-more to be center aligned. I have got this far
ul.my-videos li .show-more
{
display:inline-block;
margin:0 auto;
}
Now this doesn't work. I have setup a JSFiddle here http://jsfiddle.net/6HHKf/
Any ideas on this?
PS I want to keep the anchor as inline or inline-block so that the width isn't 100%
UPDATE
There are other elements in the li, so text-align is out of the answer
ul.my-videos li .show-more {
margin:0 auto;
border:#aaa 1px solid;
width: 100px;
display: block;
}
if you want center an element width margin: 0 auto you need to set the width
and also, you need display:block
check jsfiddle here: http://jsfiddle.net/6HHKf/5/
Simply set the CSS for the list item to center align the text.
.my-videos li { text-align: center; }
Easy, just add text-align:center; to the li.
Edit
Since you need to cope with other mystery elements in the li this may work http://jsfiddle.net/6HHKf/6/
If it's an option to use an extra span within the a element, you could use relative positioning with left +/- 50%
http://jsfiddle.net/ptriek/6HHKf/8/
Related
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
I'm having trouble centering these buttons on a page. I just know it's something stupid I missed, but I can't figure out what. Here's the page:
<div id="page1">
<ul id="choiceBtns">
<li>All Time</li>
<li>Last 2 Weeks</li>
<li>Last Year</li>
</ul>
</div>
Here is the CSS:
#choiceBtns li{
display:inline !important;
border:solid;
padding:3px;
}
#choiceBtns {
margin:10px;
margin-left: auto ;
margin-right: auto ;
}
Start by modifying the CSS as follows:
#choiceBtns {
margin:10px;
margin-left: auto ;
margin-right: auto ;
text-align: center;
}
Since your li child elements are inline, they will center within the width of the parent block, which in your case, is also the width of the page.
You may get slightly better control if you apply display: inline-block to the li elements if you need to add vertical padding and so on.
Finally, you don't need the !important declaration.
I created a div tag with min-height and gave background color 'red'. but on mozilla firefox the height of the div not increasing when the content crosses min-height limit. heres my code:
<style type="text/css"><!--
ul {
display:block;
padding:0px;
width:500px;
}
.b {
width:250px;
float:left;
display:block;
}
div {
min-height:50px;
width:500px;
background-color:red;
}
--></style>
<div>
<ul>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
<li class="b">asdsad</li>
</ul>
</div>
its seeming the div height would have to be set to fit contents,but I don't know how else can I do that.if I don't use height then background-color can't be set.please tell me how can I fit the contents to the div as well as the background color would be red.
(Don't know if I explained it clearly.so please ask me if you want to know more about the question.)
-Thanks.
RESOLVED: thank you everybody for your kind answers.
On Firefox, min-height is not interpreted on display: table(-*); properties, juste try to use height: 50px; instead as it is interpreted as minimum height on tables.
Source
The min-height property is supported in all major browsers.
But this property is not working with html tables on firefox.
Update your css like this:
div{min-height:50px;width:500px;background-color:red;overflow:hidden;}
overflow:hidden; added
Basically, that happens because of float:left in .b class. That is how it works. Usually you can fix it by adding overflow:hidden to parent div or by adding an element with style="clear:both;" at the end of parent div.
You can search more info about it with 'CSS clearfix' keywords.
When an element's display is set to table, firefox will ignore the min-height property without actually setting the height.
By switching the element to display:block, firefox then respected the min-height property.
Add overflow: hidden; to ul.
The problem is that your LIs are floated which causes the parent to not know the height of it's contents.
I have added following and it's worked:
body {
height:100%;
}
You'll have to clear the floating of the nested li tags like this:
ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
instead of min-height:50px; just add padding: 25px 0;
I am having some trouble getting this menu centered.
I tried text-align:center; on the <ul> and margin:auto;.
I'm not sure if I have to float anything, or change the display setting
JSFiddle: http://jsfiddle.net/FQ3mK/
First method: center the container <div> by using text-align:center:
#navcontainer {
text-align: center;
}
Live demo: jsFiddle
Second method: give a fixed width to the container <div> and use margin:auto:
#navcontainer {
width: 600px;
margin: auto;
}
Live demo: jsFiddle
margin:auto works only if you give the container (the <ul) a fixed width.
see: http://jsfiddle.net/FQ3mK/3/
I too was looking into this. I found the best answer here: https://stackoverflow.com/a/17634702/2537445
I think it's the best because it is the most dynamic, cross-browser compatible answer.
As to your particular anchors, you wouldn't be able to use display: block on them.
However, you can apply padding to the left and right of an inline anchor, and padding to the top and bottom of an inline li to give the spacing you need.
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.
<ul class="thumbnails">
<li class="span5">
<img src="img.jpg" />
</li>
</ul>
Any simple solution?
Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:center and display:inline-block properties. Try this:
CSS
.thumbnails {
text-align:center;
}
.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}
This way the thumbail images will center inside the .thumbnails container. Replace the .thumbnail class with the container you want to center your images in.
If you use text-align: center; and give your img display: inline-block; it should become center aligned.
See: http://jsfiddle.net/HWMZg/
This is simple just add:
<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>
Hope this was helpful
I found this works easiest for Bootstrap:
.thumbnails > li {
float: right;
margin-bottom: 18px;
margin-left: 20px;
}
I simply changed "float" from "left" to "right"
Create a new row for the image. Use the appropriate offset depending on the size of your image e.g.:
<div class="span8 offset2" >