CODEWITHSUNDEEP
htmlcsstextcenterimage-resizing
Korb
Korb

Reputation: 33

html fitting text in between two images that resize

Basically I want the text to always be centered in the middle. With one image on either side that resize depending on how large the page is to take up all the white space. This is what I have so far.

<div style="text-align:center;">
        <img style="float: left; width: 33%; margin:20px 0 0 0;" src="img/pulse.gif"/>
        <img style="float: right; width: 33%; margin:20px 0 0 0;" src="img/pulseR.gif"/>

        <h1 style="display:inline; vertical-align: middle; text-align: center; width: 33%;">Safety</h1>
    </div>

I would like to remove the width: 33% and for the images to resize to fit the space. Keep in mind it needs to be forced to stay on one line.

Thanks

Upvotes: 1

Views: 260

Answers (2)

nelek
nelek

Reputation: 4312

You can use table and table-cell for display, or just classic html table.

There is example using table and table-cell for display (there is added extra divs for images and header) :

.container
{
    width:100%;
    display:table;
    margin-top:20px;
}
.container div
{
    display:table-cell;
    text-align:center;
    vertical-align:top;
}
.container img
{
    width:100%;
    height:100%;
}
<div class="container">
    <div><img src="http://placehold.it/350x350"/></div>
    <div><h1>Safety</h1></div>
    <div><img src="http://placehold.it/350x350"/></div>
</div>

Upvotes: 1

visarts
visarts

Reputation: 11

You can wrap images inside div containers like this:

<div style="text-align:center;">
   <div class="left"> <img src="img/pulse.gif"/></div>
        <h1>Safety</h1>
<div class="right">
    <img src="src="img/pulseR.gif"/></div>

https://jsfiddle.net/uv85304v/

Upvotes: 0

Related Questions