So I have a div which will contain 3 buttons and I want these buttons centered within the div.
I tried this so far
.centerButtons
{
margin-left: auto;
margin-right: auto;
width: 90%;
}
Which centers the div containing the buttons which is fine, but the actual buttons within this div are not centered..This is my mark up so far..
<div class="clearfixLeft clearfix centerButtons">
<xsl:if test="sc:fld('Link One', .)!=''">
<div class="fl_left mr_7 mt_10">
<div class="green-btn-solid">
<sc:link field="Link One">
<span class="btnspan">
<sc:text select="." field="Link One Text" />
</span>
</sc:link>
</div>
</div>
</xsl:if>
...
</div>
Additional Classes
/* link styles */
.green-btn-solid {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; padding-right: 30px; }
.green-btn-solid span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}
Have you tried text-align: center;? I'm pretty sure it works on elements as well.
Use text-align
.centerButtons {
text-align: center;
}
which will center all inline children of class centerButtons
text-align on the centerButtons class will work if your button is an inline element. If your button is a block-level element, you will need to define it's width and use margin: auto like you did with the centerButtons element.
Related
I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
To get the idea, what I want:
Removing floats, and using inline-block may fix your problems:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(remove the lines starting with - and add the lines starting with +.)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
inline-block works cross-browser, even on IE6 as long as the element is originally an inline element.
Quote from quirksmode:
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
this often can effectively replace floats:
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.” ( http://www.quirksmode.org/css/display.html#inlineblock ).
From the W3C spec:
[inline-block] causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
Since many years I use an old trick I learned in some blog, I'm sorry i don't remember the name to give him credits.
Anyway to center floating elements this should work:
You need a structure like this:
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}
<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>
the trick is giving float left to make the containers change the width depending on the content. Than is a matter of position:relative and left 50% and -50% on the two containers.
The good thing is that this is cross browser and should work from IE7+.
Centering floats is easy. Just use the style for container:
.pagination{ display: table; margin: 0 auto; }
change the margin for floating elements:
.pagination a{ margin: 0 2px; }
or
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
and leave the rest as it is.
It's the best solution for me to display things like menus or pagination.
Strengths:
cross-browser for any elements (blocks, list-items etc.)
simplicity
Weaknesses:
it works only when all floating elements are in one line (which is usually ok for menus but not for galleries).
#arnaud576875 Using inline-block elements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:
Strengths:
works for multiline items.
Weknesses:
gaps between inline-block elements - it works the same way as a space between words. It may cause some troubles calculating the width of the container and styling margins. Gaps width isn't constant but it's browser specific (4-5px).
To get rid of this gaps I would add to arnaud576875 code (not fully tested):
.pagination{ word-spacing: -1em; }
.pagination a{ word-spacing: .1em; }
it won't work in IE6/7 on block and list-items elements
Set your container's width in px and add:
margin: 0 auto;
Reference.
Using Flex
.pagination {
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
text-align: center;
float: none;
I think the best way is using margin instead of display.
I.e.:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
Check the result and the code:
http://cssdeck.com/labs/d9d6ydif
You can also do this by changing .pagination by replacing "text-align: center" with two to three lines of css for left, transform and, depending on circumstances, position.
.pagination {
left: 50%; /* left-align your element to center */
transform: translateX(-50%); /* offset left by half the width of your element */
position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
IE7 doesn't know inline-block.
You must add:
display:inline;
zoom: 1;
Add this to you styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*If your container width is 50px put 25px, if it is 10em put 5em.
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
step 1
create two or more div's you want and give them a definite width like 100px for each then float it left or right
step 2
then warp these two div's in another div and give it the width of 200px. to this div apply margin auto.
boom it works pretty well. check the above example.
Just adding
left:15%;
into my css menu of
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
did the centering trick too
Hey so I have a div containing 3 links which have a background url image making them appear as an image
Here is my css classes
/* calculate button */
.fc-calculate {text-align: center; padding: 12px 0; display: }
.fc-calculate-button {margin: 0 auto; width:200px;}
.fc-calculate-button a {line-height: 21px; height: 21px; background: url(../../images/SOURCE/btn_grn_r.gif) 100% 0 no-repeat; width: auto; display: block; float: left; padding-right: 30px;}
.fc-calculate-button a span {display: block; float: left; background: url(../../images/SOURCE/btn_grn_l.gif) 0 0 no-repeat; line-height: 21px; height: 21px; padding-left: 12px; color: #fff;}
And mark up as follows
<div class="fc-calculate">
<div class="fc-calculate-button">
<sc:link field="Link One" cssClass="">
<span class="btnspan">
<sc:text select="." field="Link One Text" />
</span>
</sc:link>
</div>
<!-- /fc-calculate-button -->
<div class="fc-calculate-button">
<sc:link field="Link Two" cssClass="">
<span class="btnspan">
<sc:text select="." field="Link Two Text" />
</span>
</sc:link>
</div>
<!-- /fc-calculate-button -->
</div>
The issue is that instead of the links appearing next to eachother and centered they are appearing beneath eachother
You're floating your anchor and your spans but not your .fc-calculate-button class, if you want to display both containers side by side and center them on its container try this:
CSS
.fc-calculate {
text-align:center;
}
.fc-calculate-button {
display:inline-block;
*display:inline; /* ie7 fix */
zoom:1; /* hasLayout ie7 trigger */
}
divs are inherently display:block. Try adding this:
.fc-calculate {margin: 0 auto; text-align: center; padding: 12px 0;}
.fc-calculate-button {display:inline; margin: 0 auto; width:200px;}
I'm not that great at CSS. I get how the properties work together but sometimes I don't get the results I want. I have a banner at the top of my page which contains a logo and some text.
They are contained in separate div tags in one larger div tag but my Text aligns to the top of the div tag while my image is centered vertically. How do I get the centers aligned vertically?
<div id="webBanner">
<div id="bannerImage">
<a href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
</div>
<div id="bannerText">
Accreditation Database (AD)
</div>
</div>
CSS:
#webBanner
{
height: 60px;
width: 100%;
vertical-align: top;
}
#bannerText
{
font-family: Arial;
font-size: xx-large;
font-style: italic;
color: #fff;
margin: 2px 5px;
}
#bannerImage
{
height: inherit;
float:left;
width: 223px;
vertical-align: middle;
margin: 2px 5px;
}
CSS vertical align does not work the way most people expect it to. It won't actually do anything at all in this particular case.
What you probably want to do is solve this with padding on your bannerText element.
For example, to vertically center 20px text in a 60px wrapper:
#webBanner {
height: 60px;
width: 100%;
}
#bannerText {
font-size: 20px;
height: 20px;
padding: 20px 0;
/* 20px padding on top and bottom plus 20px height = 60px total */
}
Note, the 0 in the padding refers to the left and right padding. You may want to adjust that depending on how your banner is designed.
Also, the "height: 20px" declaration is redundant if the only content in the div is text and the line height is not adjusted. I included it to provide a general solution.
#bannerText {
line-height: 60px;
}
Is one way..
I'd recommend something along the lines of this...
HTML:
<div id="webBanner">
<a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
<img src="Images/logo.png" />
</a>
<h1>Accreditation Database (AD)</h1>
</div>
CSS:
#webBanner
{
height: 60px;
}
#webBanner h1
{
color: #fff;
float: left;
font-family: Arial;
font-style: italic;
line-height: 60px;
}
#bannerLink
{
display: block;
float: left;
height: 60px;
width: 223px;
}
You can adjust the CSS to vertically center the logo image by using margin:.
Given your text is inside a div, this may work:
#bannerText {
vertical-align: middle;
}
See this clear tutorial for more information on your options.
I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:
.pagination {
text-align: center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
To get the idea, what I want:
Removing floats, and using inline-block may fix your problems:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(remove the lines starting with - and add the lines starting with +.)
.pagination {
text-align: center;
}
.pagination a {
+ display: inline-block;
width: 30px;
height: 30px;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
inline-block works cross-browser, even on IE6 as long as the element is originally an inline element.
Quote from quirksmode:
An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.
this often can effectively replace floats:
The real use of this value is when you want to give an inline element a width. In some circumstances some browsers don't allow a width on a real inline element, but if you switch to display: inline-block you are allowed to set a width.” ( http://www.quirksmode.org/css/display.html#inlineblock ).
From the W3C spec:
[inline-block] causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
Since many years I use an old trick I learned in some blog, I'm sorry i don't remember the name to give him credits.
Anyway to center floating elements this should work:
You need a structure like this:
.main-container {
float: left;
position: relative;
left: 50%;
}
.fixer-container {
float: left;
position: relative;
left: -50%;
}
<div class="main-container">
<div class="fixer-container">
<ul class="list-of-floating-elements">
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
<li class="floated">Floated element</li>
</ul>
</div>
</div>
the trick is giving float left to make the containers change the width depending on the content. Than is a matter of position:relative and left 50% and -50% on the two containers.
The good thing is that this is cross browser and should work from IE7+.
Centering floats is easy. Just use the style for container:
.pagination{ display: table; margin: 0 auto; }
change the margin for floating elements:
.pagination a{ margin: 0 2px; }
or
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
and leave the rest as it is.
It's the best solution for me to display things like menus or pagination.
Strengths:
cross-browser for any elements (blocks, list-items etc.)
simplicity
Weaknesses:
it works only when all floating elements are in one line (which is usually ok for menus but not for galleries).
#arnaud576875 Using inline-block elements will work great (cross-browser) in this case as pagination contains just anchors (inline), no list-items or divs:
Strengths:
works for multiline items.
Weknesses:
gaps between inline-block elements - it works the same way as a space between words. It may cause some troubles calculating the width of the container and styling margins. Gaps width isn't constant but it's browser specific (4-5px).
To get rid of this gaps I would add to arnaud576875 code (not fully tested):
.pagination{ word-spacing: -1em; }
.pagination a{ word-spacing: .1em; }
it won't work in IE6/7 on block and list-items elements
Set your container's width in px and add:
margin: 0 auto;
Reference.
Using Flex
.pagination {
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
text-align: center;
float: none;
I think the best way is using margin instead of display.
I.e.:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
Check the result and the code:
http://cssdeck.com/labs/d9d6ydif
You can also do this by changing .pagination by replacing "text-align: center" with two to three lines of css for left, transform and, depending on circumstances, position.
.pagination {
left: 50%; /* left-align your element to center */
transform: translateX(-50%); /* offset left by half the width of your element */
position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
display: block;
width: 30px;
height: 30px;
float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
width: 90px;
background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
width: 60px;
background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
<a class='first' href='#'>First</a>
<a href='#'>1</a>
<a href='#'>2</a>
<a href='#'>3</a>
<a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->
IE7 doesn't know inline-block.
You must add:
display:inline;
zoom: 1;
Add this to you styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*If your container width is 50px put 25px, if it is 10em put 5em.
<!DOCTYPE html>
<html>
<head>
<title>float object center</title>
<style type="text/css">
#warp{
width:500px;
margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
width: 120px;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="warp">
<div class="ser">
<img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
<div class="ser">
<img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">
</div>
</div>
</body>
</html>
step 1
create two or more div's you want and give them a definite width like 100px for each then float it left or right
step 2
then warp these two div's in another div and give it the width of 200px. to this div apply margin auto.
boom it works pretty well. check the above example.
Just adding
left:15%;
into my css menu of
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
did the centering trick too
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?