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/
Related
I have a div. It is 100% width and 150 pixels tall. I nested an <h1> tag in it, and it sits under an image instead of next to it.
<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>
CSS:
body {
background-color: #aaffaa;
}
.topbar {
width: 100%;
height: 150px;
background-color: #00bb00;
}
img {
height: 150px;
width: 150px;
}
h1 {
}
A heading (<h1>,<h2>,etc) is a block level element:
A block-level element occupies the entire space of its parent element (container), thereby creating a "block." This article helps to explain what this means.Source: MDN Docs
Simply display the h1 inline-block like:
h1 {
display: inline-block;
vertical-align:top;
/*vertical-align aligns it at the top of the image, instead of the baseline*/
}
JSFiddle Example with your code
All header tags are block by default, meaning it spans the width 100%. If you want it side-by-side another element you need to change the display like so:
h1 {
display: inline;
}
Another option would be to float the two inside elements left. See fiddle: https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/
img {
float: left;
height: 150px;
width: 150px;
}
h1 {
float: left;
}
I'm building a template for headlines that later on will have varying length. Before the headline is an icon. Why does the headline break, according to the icon width?
js fiddle
HTML
<img src="http://www.ecotricity.ch/pix/slideBanner/carLogo.gif" width="50"/>
<div>
<img src="http://png-1.findicons.com/files/icons/1241/twitter_land/256/school_of_fish.png" width="50"/>
<h3> The cars are faster than fish</h3>
</div>
CSS
div{
float: left;
margin-left: 30px;
}
img{
float: left;
}
It's because you're not clearing the float after the img element within the div.
You have two options. You can either use CSS to remove the float from that img element:
div img {
float: none;
}
JSFiddle demo 1.
Or add a clearing element within your div:
<img src="..." width="50"/>
<br style="clear:both"/>
<h3> The cars are faster than fish</h3>
JSFiddle demo 2.
If you want the h3 element to be alongside the img element, you can alter option 1 above to:
div img,
div h3 {
display: inline-block;
float: none;
}
JSFiddle demo 3.
Replace your div style with:
div{
float: left;
margin-left: 30px;
width:300px;
}
//increase the width of div
If your question is "Why does H1 have a line break" the answer is because it is a block level element; however, if you are asking how to accomplish something like having all the elements in a vertical line, you can do this: http://jsfiddle.net/rM6G9/7/
div{
float: left;
clear:both;
}
img{
float: left;
display: block;
}
h3{
float:left;
clear:both;
}
If you want the second image and the headline to be inline do this:
div{
float: left;
clear:both;
}
img{
float: left;
display: block;
}
h3{
float:left;
}
<img style="float: left;" width=200 height=200 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c">
<div id="t">text next to it which will be line broken!</div>
#t
{
float: left;
line-height: 200px;
background-color: red;
}
http://jsfiddle.net/s4wMF/
well... as you can see, shrinking the width will cause the text goes underline. I want to achieve something like this:
If you wish to align the text vertically in the centre of the div it would be a good idea to use the table-cell method here instead of line-height.
<div id="t"><p>text next to it which will be line broken!<p></div>
Try something like this
#t
{
float: left;
background-color: red;
width:100px;
height:200px;
display: table;
}
#t p {
display:table-cell;
vertical-align: middle
}
Get rid of line-height. This will cause it wrap around as you described.
Try
img { display: block; }
#t { vertical-align: middle; }
There are other options for vertical-align so work with the one that works best for you.
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%}
Consider the following example: (live demo here)
HTML:
<a><img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg" /></a>
CSS:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
}
The output is:
Why the image is not vertically centered ?
How could I fix that so it will work in all major browsers ?
Please don't assume any image size (like 32x32 in this case), because in the real case the image size is unknown.
You can use position:absolute; for this.
For example:
a {
display: block;
background: #000;
line-height: 40px;
height:80px;
position:relative;
}
img {
position:absolute;
top:50%;
margin-top:-16px;
}
NOTE: This gives margin-top half of the image size.
Check this http://jsfiddle.net/cXUnT/7/
I can't really tell you the specifics as to why this happens (I'm curious myself). But this works for me:
a {
display: block;
background: #000;
line-height: 40px;
}
img {
vertical-align: middle;
margin-top:-4px; /* this work for me with any given line-height or img height */
}
You should have display: table-cell I think, this works only in tables.. I use line-height equal to height of the element and it works too.
I had the same problem. This works for me:
<style type="text/css">
div.parent {
position: relative;
}
/*vertical middle and horizontal center align*/
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
If you know the vertical size of the element and the line height, then you can vertically center it by using vertical-align: top plus a top margin.
For illustration, I created: http://jsfiddle.net/feklee/cXUnT/30/
Just put the img tag inside a div tag the set
display:table-cell vertical-align: middle to the div. Parent tag should be display:table
Example:
Css
a {
display: table;
background: #000;
height:200px;
}
div {
display:table-cell;
vertical-align: middle;
}
HTML
<a>
<div>
<img src="http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge- 131939.jpeg" />
</div>
</a>
Not sure what's the cause.
Removing the line-height and adding margins to the image does the trick.
a {
display: block;
background: #f00;
}
img {
margin: .3em auto;
vertical-align: middle;
}
<a>
<img src="https://placeimg.com/30/30/any">
</a>
Try using a background image on an <a>:
a {display:block;background:#000;line-height:40px;background:#000 url(http://img.brothersoft.com/icon/softimage/s/smiley.s_challenge-131939.jpeg) no-repeat left center;text-indent:-999px}