I've been trying to center the content which contains ul pagination. The margin-left and margin0right only center the div, but text-align: center won't center the content inside.
Here's the code:
CSS
/* Pagenation */
.article .pagelinks { text-align: center !important; display: table; margin-left: auto; margin-right: auto; width: 240px; position: relative; overflow: hidden; padding: 0; clear: both; }
.article .pagelinks ul { list-style:none; text-align: center; margin: auto; padding: 0; }
.article .page-numbers li {display:inline;}
.article .page-numbers li a {display:block; float:left; padding:4px 9px; margin-right:7px; color: #911d23;}
.article .page-numbers li span.current {display:block; float:left; padding:4px 9px; margin-right:7px; background-color: #fff; color: #911d23;}
And here's the link to the web page in question: http://disa.com.sv/constructora/?page_id=10&paged=2.
How do I get it to text-align center or center things?
try this :
.article .page-numbers li{display:inline-block}
Related
I have a header with 2 divs, the first one (floating to the left) is a simple horizontal unordered horizontal list, which is properly centered vertically (header has line-height the same as it's height and vertical-align: middle). The second div is floating to the right, and it also has a horizontal unordered list, however it has round (border-radius: 50%) hyperlinks and no text in them at all (they are going to be used as icons, with background-image).
While the first div is aligned properly no matter what is the size of header, the second one stays at the top.
My code:
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #icons
{
float: right;
}
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
You can check the code & results here:
https://jsfiddle.net/mf6yg78f/
How can I vertically align the round list elements? I'd prefer to stay away from any flexboxes etc.
Give margin-top: 7px; to #header #icons. There is no other option.
body
{
margin: 0;
padding: 0;
background-color: black;
}
#wrapper
{
width: 80%;
background-color: white;
margin: auto;
}
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #links
{
float: left;
}
#header #links ul
{
margin: 0;
padding: 0;
}
#header #links ul li
{
list-style-type: none;
display: inline-block;
}
#header #links li:before
{
content: " | ";
}
#header #links li:first-child:before
{
content: none;
}
#header #links ul li a
{
text-decoration: none;
color: inherit;
}
#header #links ul li a:hover
{
color: red;
}
#header #icons
{
float: right;
margin-top: 7px;
}
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li:first-child ~ li
{
margin-right: 10px;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
<body>
<div id="wrapper">
<div id="header">
<div id="links">
<ul>
<li>Index</li>
<li>Login</li>
<li>Gallery</li>
</ul>
</div>
<div id="icons">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
If you don't want to use flex, then try to display items as table and table cell so that it will behave as table. display:table-cell will make the element behave as <td> and so you can add vertical-align: middle to it effectively
try changing the following style to:
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
height: 50px;
display: table;
float: right;
}
#header #icons li
{
list-style-type: none;
display: table-cell;
text-align: right;
vertical-align: middle;
width: 35px;
padding-right: 10px;
}
#header #icons ul li a
{
display: block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
margin: auto 0;
float: right;
}
I am trying to vertically align an anchor tag within a list item, i have managed to horizontally align it so far. See code below and check jsfiddle for demo.
HTML
<div id="header-top">
<div id="header-top-middle">
<ul>
<li><a data-icon="" a href="#">1</a></li>
<li><a data-icon="" a href="#">222222222</a></li>
<li><a data-icon="" a href="#">3</a></li>
<li><a data-icon="" a href="#">4</a></li>
</ul>
</div>
CSS
#header-top {
height:30px;
background-color:#303030;
width: auto;
border-bottom: 2px solid #DDDDDD;
}
#header-top-middle {
width:1024px;
margin: 0 auto;
height:30px;
}
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
}
#header-top-middle ul li {
border-right: 1px solid #DDDDDD;
display: inline;
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
See jsfiddle
You can use display: table for your list:
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
}
as well as display:table-cell; and vertical-align: middle; for your link inside list item:
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align: middle;
}
Updated Fiddle
Add line-height:30px to a:
http://jsfiddle.net/hRadK/1/
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
line-height:30px;
}
This might help: http://css-tricks.com/centering-in-the-unknown/
In the link, Chris deals with centering an element whose width and height are unknown.
#header-top-middle ul li a {
color: #FFFFFF;
//display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/hRadK/8/
Try the approach outlined in this answer of wrapping your hyperlinks in a div and applying the vertical alignment on the div. The only other amendment you will need to make is then to remove the block display of hyperlinks you currently have defined.
#header-top-middle ul li a {
color: #FFFFFF;
/* display: block; - remove this rule */
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
Updated fiddle
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
I am not exactly sure how to ask this question. I am new to responsive design and understand the flow down, but I don't want to use the flow down on my menu. It is broken into 3 sizes and the mobile size, I don't want sub-menus and need it at 100% width. How do I block the information from the previous id and class selectors.
/*------------menu */
nav {font-family: "BenchNine", "PT Sans Narrow", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width:960px;
height: 43px;
margin: 0px auto 0px auto;
/*background:#0084FC;*/
border:0px solid #FFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
z-index:10;
}
/*nav ul {list-style: none;margin: 0;padding: 0 5px; } */
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {margin: 0;padding: 0 5px;list-style: none;position: relative;display: inline-table; z-index:1;}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li span { width:425px;}
nav ul li {
float: left; position: relative; padding: 0px; top:0px;border-top:0px solid #0082f8;
}
nav ul li:hover {
background: #025287;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {font-size: 20px; color: #B3DBFF; display: block; padding: 54px 10px 6px 10px; margin-bottom: 0px; z-index: 10; position: relative; font-weight:bold; text-transform:uppercase;}
nav ul ul {
background: #0082f8; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 0px solid #0082f8;
border-bottom: 0px solid #0082f8;
position: relative;
}
nav ul ul li a {
padding: 10px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #025287; color:#fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This is the css for the menu in the responsive css file.
#media only screen and (max-width: 767px) {
nav {width:100%;background:none;height:auto;margin: 0px auto 15px auto;}
nav ul li {float: none;background:#000;text-align:center;padding-bottom:0px;margin-top:5px;}
nav ul li span {clear:}
nav ul li:hover {background: url('../images/menu-bg-act_mob2.png') repeat-x;}
nav ul li a{margin-bottom : 0px;}
nav ul li a{margin-bottom : 0px;}
Your question is not very clear, but it sounds like you need to override some existing style declarations.
You should be able to do this by making more specific declarations.
E.g.:
html nav { margin: 20px } will override nav { margin: 10px }.
Check out Andy Clarke's CSS Specificity Wars for more on the subject.
I'm using Weebly to create a website, and I've been trying to modify the navigation bar so that it appears centered rather than left justified. I don't really know any code at all, but I found the navigation code, and I was wondering what I could change to center the bar. Thanks!
#nav-wrap .nav {
float:left;
}
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
background:url(saperator-h.png) repeat-x bottom;
padding-bottom:40px;
}
#nav-wrap .container ul {
list-style: none;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator.png) no-repeat right center;
margin-right: 10px;
padding-right: 25px;
}
#nav-wrap .container ul > li:last-child, #nav-wrap .container ul span:last-child li {
background:none;
}
#nav-wrap .container ul li a {
display: block;
line-height:14px;
border: 0;
outline: 0;
list-style-type: none;
text-transform:uppercase;
padding:5px;
margin-bottom:4px;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color:#000;
}
#nav-wrap {
position: relative;
width: /*set width, can't be 100% obivously if you want it centered */
margin: auto;
}
This is a guess, we don't see any HTML , apply this to whatever is the container for the entire navbar
It depends on the HTML structure, but this could work.
#nav-wrap .container ul {
display:block;
width:auto;
margin:auto;
}
#topnav a {
float: left;
display: block;
color: #fff;
font-size: 1.2em;
text-decoration: none;
padding: 11px 60px 60px 15px;
border: 0;
outline: 0;
text-transform: uppercase;
i had to mess with the padding but this centered my nav bar in weebly