Here is My Demo
<span class="boxPrice ">
<p>Previous Bill</p>
</span>
I want to create <p> inside a <span>
should be vertically aligned center inside the <span>
You can add
display:inline-block;
to your p element.
Add line-height:75px; You need to make sure the line height is the same as the div height/
http://jsfiddle.net/H4yuE/1/
I would rather not use a block level element ("p") element within an inline level element ("span"). Use div instead.
There are several tricks on how to do this, the simplest is to modify line-height to match the height of your container:
.container {
width: 100px;
height: 100px;
line-height: 100px; /* Set it to the container height */
}
You can also use "display: table-cell" to achieve the same effect:
.container {
display: table-cell;
vertical-align: middle;
}
Block elements aren't "affected" by the vertical-align: middle, only inline elements...
I suggest changing the p to inline and adding the vertical-align: middle, like this:
.boxPrice p {
padding:0 !important;
margin:0 !important;
display: inline;
vertical-align:middle;
}
Fiddle
.boxPrice
{
width:160px; height:75px; border:1px #333 solid; text-align:center; display:inline-block;}
.boxPrice p{padding:20px !important; margin:0 !important}
.boxPrice:after{ display:inline-block; content:'';vertical-align:middle; height:100%}
Related
I have a div in my app containing profile information like name, account #, and profile picture. For some reason the profile picture won't center even though I've tried the text-align:center trick. Here's my HTML:
<div id="profile-heading">
<img alt="6dbepurq" src="http://anymarket.s3.amazonaws.com/users/avatars/000/000/015/medium/6dBEpuRQ.jpeg?1406690559">
<h2>Tom Maxwell</h2>
<p id="school">University of California, Berkeley</p>
<p>User #15</p>
</div>
And the CSS for the #profile-heading div looks like this:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
Any idea?
img tag by default is inline-block and you must use text-align: center in parent container to align img tag horizontally.
In case of it's display property value has been changed to block you should set styles margin-left: auto; margin-right: auto; to center horizontally.
When I un-nested your styles everything worked in centering the image:
#profile-heading {
text-align:center;
margin-top:50px;
}
#profile-heading img {
border-radius:50%;
width:150px;
height:150px;
}
#profile-heading h2 {
font-weight:800;
margin-bottom:5px;
}
Nested are only for CSS pre-processors using SASS or LESS.
Another way to center things is with auto left and right margins: margin: 0 auto; Hope this helps!
Setting display property for img would do the trick:
#profile-heading {
text-align:center;
margin-top:50px;
img{
border-radius:50%;
width:150px;
height:150px;
display: inline-block; /* added this line */
}
h2{
font-weight:800;
margin-bottom:5px;
}
}
As <img> tag is not a block level element which means text-align property will not work as expected. You can do 2 things to solve this issue.
Either apply text-align: centeron parent element.
make the <img> tag a block level element using display: inline-block;.
You can see a DEMO here.
I've tried several properties like 'vertical-align' but I cant align the image with center of paragraph
HTML:
<p><img id="imgPhone" src="phone.png">00244 913 513 199</p>
CSS:
img {
float:left;
width:50px;
height:50px;
}
Demo
vertical-align doesn't work with floats.
Try this:
p,
img {
display: inline-block;
vertical-align: middle;
}
img {
width: 50px;
height: 500px;
}
In this case you can simple add:
p {
line-height: 50px;
}
you should wrap both elements in a div and use line-height. also an img tag inside a p tag is not exactly a good idea
http://jsfiddle.net/omegaiori/6zYeA/7/
I'm working with a div that's only holding text. It's using absolute positioning to center itself on top of an image div that is using relative positioning . I can center the div horizontally in CSS if I use
div {
text-align:center;
width:100%;
}
But when I try to center it vertically using
div {
text-align:center;
height:100%;
}
it doesn't vertically center. I'm guessing this is because text-align:center only specifies horizontally.. How could I get around this? I've seen a couple solutions that would work if the outer div is a fixed size, but the outer div is not a fixed size. It's fluid so I need this to work fluidly as well. I've tried using top:50% but I want it perfectly centered... I'm pretty inexperienced so go easy on me
As you guessed, you are right, text-align: center; is used to align the text/element horizontally only and not vertically... so if you are talking about aligning the single line text vertically than you need to use line-height, which will be equal to the container height
Demo
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
line-height: 100px;
text-align: center; /* Forgot this in the demo */
}
Where as if you are looking to vertical align entire element, than you can use either position: absolute; which I won't suggest you, instead use display: table-cell; nested inside display: table; parent
Demo 2
div {
height: 100px;
width: 100px;
border: 1px solid #f00;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Try this...
div { position:absolute; top:50%; }
and go through
http://phrogz.net/CSS/vertical-align/index.html
Try this one. Make the code as
div { text-align:center; line-height:100%; }
I need to align multiple lines of text to the middle. Here is a rough guide of the markup I am working with.
<ul>
<li>
<a href='#'>This should be centered.</a>
<li>
</ul>
So as you can see from my image, the "work" link should be centered vertically. I have the width and height set with vertical-align: middle;. I know you need to set the line height for it to actually work but theres the problem. If I set the line height to 72px (the height of the element) then some of the links will stretch down the page due to them taking up two lines.
Is there a way of aligning multiple lines of text to the middle without using line-height?
Use display:table-cell; in your li element.
li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}
This will give you this effect:
write like this
a{
display:inline-block;
vertical-align:middle;
}
& you can give display:table-cell; to it like this
li {
vertical-align:middle;
display:table-cell;
}
but it's not work in IE7 & below
I came up with this to handle vertically-aligned 100% height/width anchors inside containers:
http://jsfiddle.net/khaustic/KDfN6/
markup:
<div class="links one">
One
</div>
<div class="links two">
Two Two
</div>
css:
* {
/*ie box model forever!*/
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.links {
height: 5.0em;
text-align:center;
outline: 1px solid #333;
float:left;
margin: 0 1.0em;
overflow:hidden;
}
.links.one { width: 8em; }
.links.two { width: 4em; }
.links a {
width:10em;
text-align: center;
display: table-cell;
vertical-align:middle;
height: inherit;
}
You can try to change display to block for hyperlink and use paddings:
li a {display: block; padding: 30px 10px 30px 10px}
Why is the text in this example: http://jsfiddle.net/7EYZe/ not in the vertical center?
How can I middle the text?
EDIT:
Now I have two or more lines of text:
http://jsfiddle.net/7EYZe/12/
How can I display this properly?
The following css will center text in a div by using padding instead of height:
.centerText
{
padding: 90px 0;
font-size: 18px;
border:solid 1px #000;
}
That's an incorrect use of vertical-align. It doesn't know what object to vertically align itself to.
Here is one dynamic, table-less solution: http://jsfiddle.net/imoda/7EYZe/14/
<style type="text/css">
div {
height:200px;
width:200px;
border:solid 1px black;
}
.aligner {
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.align {
display: inline-block;
vertical-align: middle;
}
</style>
<div>
<span class="aligner"></span>
<span class="align">blabla</span>
</div>
Add text-align: center; and display: table-cell; to center it in middle of the box.
div {
height:200px;
width:200px;
border:solid 1px black;
text-align: center;
vertical-align:middle;
display: table-cell;
}
The div is vertically aligned within whatever surrounds it. That doesn't affect what's inside. Make it smaller, in fact remove the width, and put it inside something bigger.
The thing is, vertical-align was mainly designed for specifying the behaviour of table-cells. Although the name suggests that any content shall be aligned in the middle, it simply does not.
You can find a very good article here about what vertical-align really is and how to achieve your intended purpose - aligning the text vertically inside your div.
Use line-height:200px, e.g.
div {
border:solid 1px black;
height:200px;
line-height:200px;
width:200px;
}
Also, in your example, you won't need vertical-align:middle. That style means that the div will be vertically aligned to its parent element. It doesn't mean the text inside will be vertically aligned.
This is way too much of a pain to do with a div. Use a table cell instead:
html: <table><tr><td>My Text</td></tr></table>
css: td { vertical-align: middle; }