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?
Related
The project is to create a micro-blogging website similar to Twitter. I chose to name the site Chirper (how clever of me). Each post is structured by a parent div, an avatar div and a content div. The avatar and content divs are displayed inline, but they are not aligned properly. Any help is appreciated.
HTML:
<div class="chirp">
<div class="chirp_avatar_region">
<img src="img/avatar/default.png" alt="Avatar" width="64" height="64">
</div>
<div class="chirp_content">
<p>
USER
<span class="timeStamp">2013-11-22 16:43:59</span>
</p>
<p>
COMMENT
</p>
<p>
ReChirp!
</p>
</div>
The div's aren't aligned how I want them to be (level and 100% of the parent).
I can't post images, so here is a link to an imgur page: http://imgur.com/Mn9mE5q
Relevant CSS:
body {
font-family: Verdana, Geneva, sans-serif;
color: #000;
background-color: #666;
font-size: 1em;
}
/* Containers */
div {
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 3px;
border-color: #000;
padding: 10px;
}
div.pane {
width: 70%;
background-color: 0099FF;
}
div.chirp {
border-width: 1px;
margin-bottom: -1px;
width: 80%;
padding: 5px;
}
div.chirp_avatar_region {
display: inline-block;
width: 10%;
height: 100%;
text-align: center;
/*border-style: none;*/
}
div.chirp_content {
display: inline-block;
width: 80%;
height: 100%;
/*border-style: none;*/
}
div.chirp_avatar_region > img, div.chirp_content > p {
margin-top: 0;
vertical-align: middle;
}
You can either float your inner divs then clear the float following the container
or
use vertical-align:top to position your divs at the top of the container
Not entirely sure, but what I think is happening is that by defining position:inline-block, it's putting them on the same line, and making the line-height the height of the chirp_content container. In a sense anyway.
Set to vertical-align:top; and it should solve it.
Ex.
.chirp_content, .chirp_avatar_region{ vertical-align:top; }
JS Fiddle
Give to the avatar_region a float: left, and remove its width: and height: setting. Remove the chirp_content div, it circumvents the inlining.
I have a div message which basically has a text and a link. I want its size to be changing based on the string inside it. Also I want this message div to be centered inside its container.
I have been playing with it for a while without much luck. Here is the link to JSfiddle: http://jsfiddle.net/pDYJ8/
Also I don't know how make that text and link appear one after other ( not on the new line )
Here is the code:
<div class="container">
<div class="message">
<p>do you want to </p>
<a href="somewhere" target="_blank">
buy this product
</a>
</div>
</div>
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
}
.message {
margin-right: auto;
margin-left: auto;
background: #ddd;
width:100px;
}
Tried display inline block to fit its content but then it wouldn't center it inside its parent.
Keeping width 100px for now just to mock my requirements
Just Tweak Some CSS
See the demo fiddle.
.container {
position: absolute;
background: #666;
top:25%;
width:100%;
font-size: 15px;
color: #e47911;
text-align: center; /*added*/
}
.container .message {
display: inline-block; /*added*/
text-align: left; /*added*/
background: #ddd;
}
.message p { /*added*/
display: inline-block;
}
Explanation
The text-align center causes the now inline-block display of .message to center, which is then reset to have its own text-align back at left (this is not necessary). To get the a on the same line, the p also needs to be some type of inline display, here I chose inline-block as well..
I think you are over complicating things. All you need is a text-align: centeron the container and a display: inline-block on the message:
.container {
background: #666;
font-size: 15px;
color: #e47911;
text-align: center;
}
.container .message {
background: #ddd;
display: inline-block;
}
http://jsfiddle.net/Pevara/pDYJ8/9/
The inline block makes the div act as a word inside text, and the text-align center makes the 'word' align to the center...
Here is a simplified approach to a couple of the answers given. It reduces the amount of HTML and CSS needed.
CSS
.container {
color: #e47911;
text-align: center;
}
.message {
display: inline;
background: #DDDDDD;
}
HTML
<div class="container">
<p class="message">
Do you want to buy this product?
</p>
</div>
I would definitely put your anchor tag, <a> inside the paragraph tag, <p>.
You could even remove display: inline; from .message if you made it a <span> rather than a <p>.
Check this out:
http://jsfiddle.net/pDYJ8/10/
Changes made to above link
.container .message {
margin: 0 auto;
width:auto;
}
span{
background: #ddd;
display:inline;
}
You can simplify it with display: table; and margin: 0 auto;
.container {
display: table;
margin: 0 auto;
background-color: #DDD;
}
<div class="container">
do you want to buy this product
</div>
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.
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 am using the following code to display a list of images and apply a drop shadow effect to each image. The images may vary in orientation but will always be a maximum of 120px.
To get this to work I am having to float:left the "shadow" container. By adjusting the margins of the container and it's image, I am able to simulate a drop shadow. (http://img200.imageshack.us/i/withfloat.png/)
The downside of this approach is that the image then becomes left aligned. If I remove the float the .shadow background spans the full width of the li and does not wrap the image.
(see above url but "withoutfloat.png")
How can I get the shadow div to wrap the image and keep it centered within the li?
Css:
<style type="text/css">
ul
{
list-style-type: none;
position: relative;
margin: 0;
padding: 0;
}
li.box
{
display: inline;
float: left;
margin: 3px;
background: red;
position: relative;
}
.wraptocenter
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 120px;
height: 120px;
}
.wraptocenter *
{
vertical-align: middle;
}
.shadow
{
background: blue;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.shadow img
{
margin: -4px 6px 6px -4px;
}
</style>
Html:
<ul>
<li class="box">
<div class="wraptocenter">
<span>
<div class="shadow">
<img src="Handler.ashx?id=936&size=103" />
</div>
</span>
</div>
</li>
</ul>
Remove the float but add overflow:auto to the containing element. That will make the non-floating element contain its inner floating elements the way you expect.