I have the following code which is basically an image with some text on the right, all on the same line. I would like the text to be kind of vertically centered with the image :
|
|
img myText here
|
|
Here is my code
img, .info {
display: inline-block;
}
<img src="http://placehold.it/100x150">
<span class="info">
<span>FOO</span>
<span>BLAH</span>
</span>
I tried to apply some margin to the info class but it moves the img as well. How can I do it ?
Thanks
As mentioned use vertical-align to center the items vertically. Also, you have to make them inline-blocks to add a padding:
img, .info {
display: inline-block;
vertical-align:middle;
}
.info {
padding-left:32px;
}
<img src="http://placehold.it/100x150">
<span class="info">
<span>FOO</span>
<span>BLAH</span>
</span>
Just use vertical-align:middle
The element is placed in the middle of the parent element
img, .info {
display: inline-block;
vertical-align:middle;
}
<img src="http://placehold.it/100x150">
<span class="info">
<span>FOO</span>
<span>BLAH</span>
</span>
Put them in a wrapper, then vertical align them:
https://jsfiddle.net/g7mk4cp0/
HTML:
<div class="wrapper">
<img src="http://placehold.it/100x150">
<span class="info">
<span>FOO</span>
<span>BLAH</span>
</span>
</div>
CSS:
.wrapper > img, .wrapper > span {
vertical-align: middle;
}
try vertical align middle method
.holder img{
vertical-align:middle;
}
<div class="holder">
<img src="http://placehold.it/100x150">
<span class="info">
<span>FOO</span>
<span>BLAH</span>
</span>
</div>
Related
I have the following HTML:
<div>
<p>
Some text
<span class="fa fa-ban"></span>
</p>
</div>
where the "Some text" part can be anything. What I want to achieve is the following in CSS:
.
I tried using absolute positioned elements, floats, and couple of other hacks but none of them worked. Can somebody help me with how I can achieve the same? I don't even know if this is achievable with CSS but I could be wrong.
Flexbox can easily do this:
.box {
display: flex;
max-width: 200px;
border:1px solid;
}
.box span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.box span:last-child {
flex-shrink: 0;
margin-left:5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<p class="box">
<span>Some text</span>
<span class="fa fa-ban"></span>
</p>
<p class="box">
<span>more and more text</span>
<span class="fa fa-ban"></span>
</p>
<p class="box">
<span>a lot of text here to have an overflow</span>
<span class="fa fa-ban"></span>
</p>
I have this code
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
I am not able to vertically align the text2 to the bottom of the parent div.
How to do it?
That's rather strange HTML code, but here's a solution that doesn't change the HTML:
(P.S.: You asked that the span should align with the bottom of the parent DIV, not wth the h1. If you want the latter, you have to give them both the same margin-bottom and padding-bottom.)
div:first-of-type {
position: relative;
overflow: hidden;
}
span {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
<div>
<div style="float:left">
<h2>header</h2>
</div>
<span style="float:right; vertical-align: bottom">
text2
</span>
<div class="clear:both"></div>
</div>
Probably you will have to consider changing the elements you are using since h2 and span dont have the same default user agent style. h2 will appear bolder/ bigger than span and span appear lighter. That is why you see it not to be aligned
try this
`<div style="float:left">
<h2>header</h2>
</div>
<div style="float:right; vertical-align: bottom">
<h2> text2</h2>
</div>
<div class="clear:both"></div>`
I'm trying to align two divs horizontally inside my HTML: the first one contains an image and the second a text, and this is the used code:
<div style="float: left; width: 55px;">
<img src="../img/look.svg" alt="">
</div>
<div style="display: inline-block;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
I tried many methods, but I've been unable to get the text line in the same level as the image vertical axis, and the text inside the second div gets displayed very far from the image vertically.
So, is there any possibility to fix that?
The problem is with the float. The vertical-align: middle; line-height: 1; will fix the issue:
div {
display: inline-block;
vertical-align: top;
line-height: 1;
}
div:first-child {
width: 55px;
}
<div>
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div style="display: inline-block; vertical-align: middle; line-height: 1;">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Preview
Top Alignment:
Middle Alignment:
The vertical-align decides the vertical alignment. If you want the image and text to be on the same line, use vertical-align: top.
A few things first:
don't use inline styles
don't mix float with inline-block
Option 1: using flebox
section {
display: flex;
gap: 10px;
}
<section>
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</section>
Option #2 using inline-block
div {
display:inline-block;
vertical-align:top;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
Option #3 using float
div {
float: left;
margin-right:10px
}
<div>
<img src="//dummyimage.com/55x55" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
flexbox to the rescue.
I added your divs inside another one, which will align its items. In my CSS my image has 100px so I changed the width to 100px. Change yours accordingly.
.halign {
display:flex;
align-items: center;
}
<div class="halign">
<div style="width: 100px;">
<img src="http://lorempixel.com/100/100/" alt="">
</div>
<div>
<span> Look for cases </span>
<span> from people near you. </span>
</div>
</div>
Try to seprate the CSS and HTML and do not mix display:inline-block with float:left. Also use clear:both after both div
<style>
.fisrstDiv {
float: left;
display:block;
}
.secondDiv {
float: left;
display:block;
}
.clear {
clear: both;
}
</style>
HTML
<div class="fisrstDiv">
<img src="//placehold.it/50?text=DP" alt="">
</div>
<div class="secondDiv">
<span> Look for cases </span>
<span> from people near you. </span>
</div>
<div class="clear"></div>
I want to show the text "You save ..." in a new line. I do not how to do. Please guide me. Please click for more details jsfiddle code
<div class="product-wrap first">
<div class="item">
<div class="product-image">Img area
</div>
<div class="product-content">
<div class="product-name"> <a class="fontcolor" href="#">Motorcycle Leather Boots (4Riders Boots Always)</a>
</div>
<div class="price-box">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p> <span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u></em></span>
</div>
<div class="clr"></div>
</div>
</div>
</div>
Make use of <br/> tag here! It breaks the line
DEMO
UPDATE
Add below properties to your .product-wrap .item .price-box class css
DEMO
.product-wrap .item .price-box {
margin-top: 6px;
overflow: hidden;
width:auto; //Set this
float:left; //and keep it float left
}
span.div-discount {
/* display: block; */
clear: left;
display: block;
}
just add this to your css it will work
here is the demo please look out
DEMO
Add Css
.div-discount b, .div-discount em{display:block;}
Your paragraphs are set to float, which is fine, but you will need to clear and wrap it in a div and set that div to block so it extends the fill width.
Then you want to set the div-discount class to block too.
CSS:
.amounts {
display: block;
}
.div-discount {
color: #b50016;
display: block;
}
.clr-both {
clear: both;
}
HTML:
<div class="amounts">
<p class="special-price"><span class="price" id="product-price-77">£53.68</span>
</p>
<p class="old-price"><span class="price" id="old-price-77">£84.15</span>
</p>
<div class="clr-both"></div>
</div>
<span class="div-discount"><b>You save </b> <em><i>36.21</i><u>%</u>
See jsFiddle
The b element in HTML stands for bold. Add the rule in CSS defines is display as inline. It means the elements which possess inline or inline-block properties will be shown on same line. So If we want to show our custom text on a new line, we have to change its style from display inline to display as block.
.div-discount b{ display:block;}
I created piece of code. In span class mean-head increase horizontally if the text of the span increase. I want to fix it's width for like 30 characters. After that text so go to new line.
EXAMPLE FIEDLE
<span class="top-head"> Recommended URLs </span>
<div class="c1">
<div class="item">
<div class="image">
<img class="media-object" src="http://deathandtaxesmag.wpengine.netdna-cdn.com/wp-content/uploads/2014/02/Screen-Shot-2014-02-27-at-12.39.17-PM.png" >
</div>
<div class="descriptionContainer">
<span class="main-head"> Mashable - Business </span>
<span class="min-head">Title of link Title of link Title of link Title of link </span>
<span class="subcont">
<span class="fa fa-retweet"> RT 100+ | </span>
<span class="fa fa-twitter"> Tweet 100+</span>
</span>
</div>
</div>
</div>
Give fixed width for span class and add display block
.min-head { width:150px; display:block}
Will this help you?
span.min-head {
display: block;
font-size: 9px;
margin-top: 1px;
max-width: 130px;
white-space: pre-wrap;
}
Check the fiddle HERE