Why isn't my text-align: center; working? The text and the span are supposed to be in the center of the image, (I'm kind of new at this, please understand).
HTML looks like this:
<div id="image">
<div id="imageContainer">
<span><h1>Responsive Web</h1></span>
</div>
</div>
CSS looks like this:
#imageContainer h1 {
text-align: center;
font-size: 60px;
color: white;
letter-spacing: 0.05em;
}
#imageContainer span {
display: inline-block;
padding: 0.5em 0.2em;
border: white solid 10px;
}
I don't understand why it isn't working, my H1 tag isn't listening to my text-align: center; and neither is my span. This might be a newbie question, (lol) but this confuses me a lot, help please!
Remove the display property
#imageContainer span {
padding: 0.5em 0.2em;
border: white solid 10px;
}
Or put the width: 100% on
#imageContainer span {
width: 100%;
}
When you assign display: inline-block; to your span, the span is only as width as its content. You will have to set its width to 100% to get it working, or remove the display: inline-block;.
try:
#imageContainer{ text-align: center; }
and the rest (span and h1)
display: inline-block; or display: inline;
Related
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
I have the following simple code snippet. It is taken out from my application where .a1 is a container button, which has an icon. The icon should be vertically middle aligned to the parents line-height/height, but it is shifted with 1px from top. Could you explain me why this is the behavior? Is there any solution?
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
Why?
Because inline-block elements render with "white-space". You can see this in this demo where no height/width is set on the parent element.
When you use vertical-align:middle; the "white space" is rendered before the element (on top) (black line in the demo). This space moves the child element down and therefore it doesn't appear verticaly centered.
how to fix :
You can use display:block; and calculate the margin to apply to the child element so it centers verticaly and horzontaly.
You can also take a look at this question which talks about white space and ways to avoid them.
Well, it seems like font-size:0; for .a1 seems also a fix for such issue.
.a1 {
display: inline-block;
width: 28px;
line-height: 28px;
background-color: #000;
text-align: center;
vertical-align: middle;
font-size: 0;
}
.i {
display: inline-block;
width: 16px;
height: 16px;
background-color: #f00;
vertical-align: middle;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00;
}
<div class="a1"><i class="i"></i>
</div>
.a1 {
display: inline-block;
background-color: #000;
}
.i {
display: block;
width: 16px;
height: 16px;
margin: 6px 6px;
background-color: #f00
Hi I'm trying to center the text in the first circle div. I think it's currently in the center of the div but when there is more than one characters like '200', it looks funky as below. I have the red circle background and trying to make the text in the center regardless of the characters. thank you in advance!
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 10px;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>
Try to set width:100% on .bg .label as follows:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
EDIT: if you want to keep the same width for the circle and still center the text, you could replace width:10px; in .bg with the following:
.bg {
/* ... */
width: 35px;
padding: 10px 0;
text-align: center;
/* ... */
}
So the full snippet would look something like this:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
width: 35px;
padding: 10px 0;
text-align: center;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
Try something like this. I'm guessing you are ok with fixing the width and height of your little circles? If so, this solution should work for you. The benefit here is your circles stay consistent visually regardless of the values placed within them.
You can adjust the width/height of the circle to your liking, and whatever value you place in there will remain centered. Keep in mind, with this solution, your circles won't scale to match the value's length should it expand beyond their bounds. I assume this is the behavior you're looking for, though, given your original code.
Also, note, you might need to adjust the top margin to position the values according to the height of the circles if you change them. Hope this helps!
.bg {
background: red;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;
width: 38px;
height: 38px;
}
.bg .label {
display: inline-block;
margin: 9px auto 0;
text-align: center;
width: 38px;
}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>
I have been trying to align two elements, a h2 and a div side by side without having one of them colapse when the window changes to a smaller size. I've searched the web a bit but found nothing similar that would help and my solutions just wouldn't work so I though here there would be someone able to help me.
So I want it to be displayed like this at all times:
https://imagizer.imageshack.us/v2/912x135q90/631/ZYR7sc.png (Can't post images sorry!)
But when window size changes dispite the fact the div should adapt at some point it just breaks to next line:
https://imagizer.imageshack.us/v2/730x144q90/912/yRBpkc.png
Here is my code on this one:
HTML
<div id='pagetitle'>
<h2 id='subtitle'>Weapons</h2>
<div id='hline'></div>
</div>
CSS
#pagetitle { /* This div is for centering both of the elements. */
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
display: inline-block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
text-align: center;
}
#hline {
display: inline-block;
background-color: #72c9b9;
width: 70%;
height: 1px;
position: relative;
bottom: 4px;
margin-left: 20px;
}
So this is it guys, any sugestions? Thanks in advance.
cs.almeida
Here's a way how to do it:
demo
<div id='pagetitle'>
<h2 id='subtitle'><span>Weapons</span></h2>
</div>
#pagetitle {
width: 90%;
margin: 0 auto;
display: block;
}
#subtitle {
border-bottom: #72c9b9 solid 2px;
height: 18px;
display: block;
color: #72c9b9;
font-size: 30px;
font-weight: 300;
}
#subtitle > span {
background-color: white;
padding: 10px 20px;
}
I'm trying to center the text horizontally, but it doesn't work. It seems to be because of the display: table-cell
Would you know a work around? (note that I'm using bootstrap)
Thanks! > Codepen: http://codepen.io/goodux/pen/wgBCf
html:
<div class="feature">
<span class="glyphicon glyphicon-star feature-icon"></span>
<p class="feature-text text-center">
Gather user's feedback and engineer's requirements.
</p>
</div>
css:
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
}
span.feature-icon {
background-color: #FA6900;
border-radius: 3px;
color: #FFF;
font-size: 3em;
padding: .5em;
position: absolute;
top: 0;
}
p.feature-text {
overflow: hidden;
padding: 0 .5em 0 6.5em;
vertical-align: middle;
height: 6em;
display: table-cell;
}
.text-center {
text-align: center;
}
For display:table-cell to work correctly it needs to be inside a display:table element.
So, if you change the .feature rule to
.feature {
margin-bottom: 3.5em;
background-color: #f3f3f3;
border-radius: 5px;
display:table;
width:100%;
}
it will work as expected: http://codepen.io/gpetrioli/pen/EDtCq
of course you could avoid using display:table-cell if it is not really needed. (and in your example it looks like it is not..)
Try p {text-align: center;margin: auto }and why are you using display:table-cell ?