I have the following html:
<div id="footer">
<ul id="menu-utility-navigation" class="links clearfix">
<li class="menu-685 menu-site_map first">Site Map
</li>
<li class="menu-686 menu-privacy_policy">Privacy Policy
</li>
<li class="menu-687 menu-terms___conditions">Terms & Conditions
</li>
<li class="menu-688 menu-contact_us last">Contact Us
</li>
</ul>
</div>
With the following CSS:
div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
I threw in the font-size bit just to see if the style was working (Firebug reports it is working but I wanted to see). It is working. But the text is not centered in the footer in Firefox or in Safari (have yet to check it in IE).
I tried with and without margin: 0 auto; and with and without text-align: center; no combo of those things worked.
Here is output from Firebug:
div#footer {
font-size: 10px;
margin: 0 auto;
text-align: center;
width: 700px;
}
Inherited fromdiv#page
#skip-to-nav, #page {
line-height: 1.5em;
}
Inherited frombody.html
body {
color: #666666;
font-family: verdana,arial,sans-serif;
}
Help?
I assume you want all the items next to each other, and the whole thing to be centered horizontally.
li elements are display: block by default, taking up all the horizontal space.
Add
div#footer ul li { display: inline }
once you've done that, you probably want to get rid of the list's bullets:
div#footer ul { list-style-type: none; padding: 0px; margin: 0px }
To make a inline-block element align center horizontally in its parent, add text-align:center to its parent.
If you want the text within the list items to be centred, try:
ul#menu-utility-navigation {
width: 100%;
}
ul#menu-utility-navigation li {
text-align: center;
}
Use display: block; margin: auto;
it will center the div
You can use flex-grow: 1. The default value is 0 and it will cause the text-align: center looks like left.
https://css-tricks.com/almanac/properties/f/flex-grow/
This worked for me :
e.Row.Cells["cell no "].HorizontalAlign = HorizontalAlign.Center;
But 'css text-align = center ' didn't worked for me
hope it will help you
I don't Know you use any Bootstrap version but the useful helper class for centering and block an element in center it is .center-block because this class contain margin and display CSS properties but the .text-center class only contain the text-align property
Bootstrap Helper Class center-block
Related
I am new to html/css. My problem is when I re-size my browser window the text of the nav-bar shifts/condenses according to the size of the window and becomes distorted. I would like it to remain static so that when I narrow my browser window I would have to have to scroll over to the right to be able to see the text again. I'm using bootstrap as well.
This is my code:
HTML
<body>
<div class="nav">
<div class="container">
<ul class="pull-right">
<li>HOME</li>
<li>WINES</li>
<li>GRAPES</li>
<li>ABOUT US</li>
</ul>
</div>
</div>
</body>
CSS
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
I tried using .container {width: 900px;} but that didn't help. The nav bar still doesn't stay static.
You can solve this by adding a min-width to the navbar.
navigation {
margin-right: auto;
margin-left: auto;
max-width: 100%;
min-width: 1000px;
}
You can solve this by adding a minimum width to a div surrounding the nav bar.
In your case it would be in the .nav class
.nav {
min-width:165px;
position: absolute;
top: 20px;
right: 0px;
}
I don't know if you shared all the code with us, but from the code you provided 165px should be fine for the minimum width. If there is more code present that makes the navbar a different width then you may need to adjust the pixel amount of min-width:.
This should work
ul {
white-space: nowrap;
}
Here is my html:
<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li>1st button</li>
<li>2nd button</li>
<li>3rd button</li>
</ul>
I also attached an image if what I currently have. I tried adding display: table-cell;
vertical-align: middle; to the anchor tag class but it did not work I also tried adding a span around teh anchor tag with a class with: display: table-cell; vertical-align: middle; but that did not work either, in both cases button's heights were not constant.
How can I vertically center text and keep my buttons height and width the same?
Ended up going with the display:table-cell solution as it was the most cross browser....I did not like it at first because I had to hard code the width of my button instead of 100% but once I got past that it was a solid solution:
my li:
.header #sub_nav li {
display: table;
float: left;
font-size: 11px;
line-height: 12px;
margin-bottom: 12px;
margin-left: 12px;
width: 86%;
}
my a:
.header #sub_nav li a {
display: table-cell;
height: 45px;
vertical-align: middle;
width: 111px;
}
I Do something similar to what you're asking. Defining the parent as "display: table" and the element itself with "vertical-align:middle" & "display:table-cell" worked for me.
If you have only one item within the li (or div, etc), the easiest way is to set line-height to be the same as the element's height, and it will be vertically aligned. I have created a simple fiddle below, and hope this helps!
http://jsfiddle.net/fCkLJ/
li {
/* other styling */
height: 30px;
line-height: 30px;
}
Try:
li{
padding-top:20%;
padding-bottom:20%;
}
This will cause even padding top/bottom on the LI but if one LI wraps and another one doesnt it they will be different heights.
http://jsfiddle.net/VMCH6/1/
There are many ways, looks here
If you are using background-image, then you should set a fixed width height for the li.a element and use this hack for the a element:
li a {
height: 50px;
width: 300px;
margin: auto 0;
display: block;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
This is the working example (even with your image as background). The complete button will be clickable and the flexibility to be multiple lines:
http://jsfiddle.net/GqBAL/494/
Note: This is not 100% cross-browser, but is the best solution.
I dont have enough knowledge of HTML/CSS but i think it is Ok .
in this answer i have removed height from UL/LI and provided auto height , and in anchor <a> tag i have used padding , to display a bigger-height-centralized button .
CSS part is :
<style>
html , body , ul , li
{
margin:0;
padding:0;
}
html , body
{
width:100%;
height:100%;
}
ul
{
width:100%;
height:auto;
background-color:red;
}
li
{
width:33%;
height:auto;
display:inline-block;
background-color:green;
}
a
{
width:100%;
height:100%;
text-align:center;
display:block;
padding-top:10%;
padding-bottom:10%;
}
</style>
HTML part is :
<body>
<ul>
<li>tushar</li>
<li>tushar</li>
<li>tushar</li>
</ul>
</body>
I have an CSS issue with a menu.
Through CSS I´ve added padding to li's.
The li's have display: inline.
It works when I set to inline-block, but I want to know why it doesn't work with inline. In my understanding padding should work with inline elements.
HTML
<header>
<nav>
<ul id="mainmenu">
<li>Home</li>
<li>Users</li>
<li>Rankings</li>
<li>In the press</li>
<li>Blog</li>
</ul>
</nav>
</header>
CSS
body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }
Working demo
http://jsfiddle.net/4QLmp/
PS browser is Chrome Canary
The padding is there, but since the <li>s are defined as inline, they're aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:
header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}
so that the <ul>s get pushed down, you'll see the padding present. inline-block doesn't follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.
header nav li { display: inline; padding: 10px 5px; }
UPD:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, "the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property".
I made a custom and horizontal unordered list. Here's a code example (nothing special):
<div id="steps-left">
<ul>
<li class="active one">Start</li>
</ul>
</div>
Here's the CSS that styles it:
#steps-left {
margin: 0 auto;
display:inline-block;
padding-bottom: 40px;
font-weight: 200;
font-size: 14px;color:#333333;
}
#steps-left ul {
margin: auto;
padding: 0;
float: left;
}
#steps-left li {
display: inline;
}
#steps-left ul li.active {
background: transparent url('../images/steps-left-active.png') no-repeat top left;
padding: 0px 0px 30px 46px; /* Makes the text move to the right of the bullet */
line-height: 0px;
margin-right: 30px; /* Defines the horizontal spacing between the bullets */
}
#steps-left ul li.active.one {
background-position: 0 0;
height: 42px;
width: 43px;
}
Problem:
I'm trying to figure out how to shift the text down, because as shown by the image below, the text is too high. So far, I haven't found anything that shifts the text down. I know the line-height property works, but that only works if the list is vertical, which in this case I want it horizontal.
Here is the image:
http://i.stack.imgur.com/ia24l.jpg
One option you have is making a custom tag pair for each of your menu items. Did you try that?
Do it as follows:
<div id="steps-left">
<ul>
// And here you would be able to apply line height.
<li class="active one lineheight">Start</li>
</ul>
<ul>
<li class="blah blah lineheight"> Second item </li>
</ul>
</div>
CSS
.lineheight {
//your desired lineheight.
example: line-height:100px;
}
Here you have a more specific and descriptive text on how to do it: Vertical-Align for li tag
I'm using CSS buttons from this tutorial:
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
I need to put a button in the middle of a DIV so it's centered. But I can't!
Here's the code of the button:
<a class="button" href="#"><span>Bring world peace</span></a>
And here's CSS:
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('bg_button_a.gif') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 24px;
margin-right: 6px;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
Here's the code I'm trying to use:
<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div>
the align attribute for the div element is deprecated. You're better off defining a class for that div, like so:
<div class="centerize">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
And the CSS:
.centerize {
text-align: center;
}
Note however that setting the text-align will only affect the content inside the div. The div itself (should be) a block element, and depending on where it sits in the document structure, may not be centered itself.
Just to make a little more certain, you can do something like this:
.centerize {
display: block;
margin: 0 auto;
text-align: center;
}
Now you can apply centerize to any element, and that element should take up the entire browser's width and center-align its content.
Modify the button class for these properties:
.button{
margin-left:50%;
margin-right:50%;
position: relative;
}
And wrap your link in the div like this:
<div align="center">
<a class="button" href="#"><span>Bring world peace</span></a>
</div>
The a.button is floated to the left. You could try float: none; on that element. margin: 0 auto; is also useful for center-aligning elements.
Does that help?