Align an Image and Some Text on the Same Line Without Using Div Width

Align divs in same line without using float and width

Looking at the required layout, the borders and padding refer to the whole thing, not just the First div.

If you put both divs in a container and put that styling on the container, you could use flex to align the divs within container.

.container {
display: flex;
margin-bottom: 10px;
margin: 15px 0px 0px 20px;
padding-top: 35px;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}

.first {
color: #377fd9;
font-size: 1.375rem;
}

.second {
cursor: pointer;
text-align: end;
padding: 8px 0;
}

.first,
.second {
flex: 1;
}
<div class="container">
<div class="first">First</div>
<div class="second">Second</div>
</div>

CSS align images and text on same line

You can either use (on the h4 elements, as they are block by default)

display: inline-block;

Or you can float the elements to the left/rght

float: left;

Just don't forget to clear the floats after

clear: left;

More visual example for the float left/right option as shared below by @VSB:

<h4>     <div style="float:left;">Left Text</div>    <div style="float:right;">Right Text</div>    <div style="clear: left;"/></h4>

How can I have an image on the same line as text in html

You can make a table and put them in it:

<table><tr>  <th>    <img src="https://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg" width="50px" height="50px">  </th>  <th>    Write your stuff!  </th></tr></table>

Align text on the same line without float

You may simply add a fixed width to the span and adjust the value as you need:

.text1 {    padding: 10px 20px 0px 20px;    text-align: left;}.go-right {    display: inline-block;    text-align: right;    width:calc(100% - 70px); /*Replace with fixed value if calc not supported*/}
<div class='text1'>    Bill to: <span class="go-right">text</span> <br/>    Amount:  <br/>    Date:  </div>

Text and Image in same line

You could remove the float property from the paragraphs, and use display: inline-block; (or inline), or simply use an inline wrapper like <span> instead.

Also, to align vertically the inline(-block) elements, you could use vertical-align: middle; as follows:

img {
vertical-align: middle; }

p {
display:inline-block; }

WORKING DEMO

For horizontal centering the inline elements, you could set the text-align: center; to the parent element:

.parent { text-align: center; }

UPDATED DEMO.

Placing image and text on same line in a span

Try this:

.parent{  width:100%;  height:76px;  border:1px solid grey;  border-radius:12px;  display: -ms-flexbox;  display:flexbox;  display:flex;  text-align:center;  align-items:center;  justify-content:center;}#space{  width:10px;  display:inline-block;}.child{    font-family: 'Lato', sans-serif;    font-size:14px;    font-weight:bold;  width:200px;  height:45px;  line-height:45px;  display:inline-block;  vertical-align:middle;  border:2px solid #8CAAD2;  border-radius:10px;}
.clipart{ vertical-align:middle; display:inline-block; clear:left;}
<div class="parent"><span class="child"><img class="clipart" src="http://i.imgur.com/Cc37OOU.png">(XXX)-XXX-XXXX</span><div id="space"></div><span class="child"><img class="clipart" src="http://i.imgur.com/IsuHm7W.png">Email Inquiry</span></div>


Related Topics



Leave a reply



Submit