How to keep an image and text (vmax font) aligned when resizing browser?


Tags: html,css,html5,css3,twitter-bootstrap-3

Problem :

I added an img and div(filled in like a circle or div-circle) next to the text using bootstrap and view port units (vmax font) in order to appropriately change the font size and image size as I resize the browser window while keep them aligned and displayed as inline.

Basically this is what I want to maintain as I resize the window:

perfect sample

However, you don't always get what you wished for...

Problem: My problem began as I

  • Added an image next to the h3 title
  • Added a div-circle(div shaped like circle) next to the H1 and P Tags
  • In the CSS I added display:inline-block;
  • I also added vertical-align:middle

STORY: So I started resizing the window and I realized that the vertical align only works sometime, and the rest of the time it shifts the text and images up or down. And when I make the window more narrow it causes the image/div circle to push the text to the bottom. I don't know how to solve this problem at this point. I just want to keep the image and text aligned no matter the size. So....

How can I format my code to keep the images/circle aligned to my text as I resize the browser window?

Help Fix my Fiddle :(

CSS:

    h1 {
  font-size: 3.3vmax !important;display:inline-block;
}
h2 {
  font-size: 3.0vmax !important;display:inline-block;
}

h3 {
  font-size: 2.5vmax !important;  display:inline-block; 
}

p {
  font-size: 2.0vmax !important;  display:inline-block; 
}

img {height: 2.5vmax !important; width:14.5vmax !important; }

HTML

<div class="container">
    <row>
        <div class="col-sm-12">
            <h3>Welcome to the main title of this page</h3>
            <img   src="http://www.useragentman.com/tests/pointerEvents/images/disney-tv.png" />
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">1</div>
            <h2 style="display: inline-block;">This is a main subtitle section of the page</h2>
            <p style="display: inline-block;" class="text-muted">The content here is far longer but smaller and remains muted.</p>
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">2</div>
            <h2>This is a main subtitle section of the page</h2>
            <p class="text-muted">The content here is far longer but smaller and remains muted.</p>
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">3</div>
            <h2>This is a main subtitle section of the page</h2>
            <p class="text-muted">The content here is far longer but smaller and remains muted.</p>
        </div>
        <div class="col-sm-12">
            <div class="numberCircle">4</div>
            <h2>This is a main subtitle section of the page</h2>
            <div class="guestlist">
                <form class="guestlist-form" action="email.php#updates" method="post">
                    <input name="emailaddress" id="emailaddress" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
                    <input class="button" title="Enter Email" name="submit" type="submit" value="Add Email">
                </form>
            </div>
        </div>
    </row>
</div>

Any solutions or advice on how to solve this issue will be greatly appreciated. I need someone who's more of an expert with css3, and can guide me in solving this issue. Thank you!



Solution :

With minor markup change, adding a textwrapper

<div class="numberCircle">1</div>
<div class="textwrapper">
    <h2>This is a main subtitle section of the page</h2>
    <p class="text-muted">The content here is far longer but 
</div>

and a new CSS rule, which is added to the <div class="col-sm-12 flex-it"> element

.flex-it {
  display: flex;
  align-items: center;
}

The number will stay in place, updated fiddle

What happens here is the flex-it class make the image and the text wrapper flexbox items, and the align-items: center keeps their content vertical centered.

The textwrapper keeps the text side-by-side with the image.

Note, you need to fix the fourth number/text/fields so it behaves like the rest


    CSS Howto..

    Trade off for CSS sprites: how many images to combine into one

    how can I make div have auto height according to content

    How to cancel a CSS style set by 'hover child' selector on event?

    Angular show / hide with animation

    How can I force an outer div to expand to height of inner div?

    How do you change the theme and colors of Site.Master in ASP.NET / C#?

    How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

    How do I make this type of layout with CSS? [closed]

    jQuery - how do I show the full navbar at certain width?

    how to give css height a percentage of a different div (above original div)

    How to create pentagon shape for avatar image?

    How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]

    How to customize twitter/bootstrap more deeply? [closed]

    How are these sites implementing their onhover overlays?

    How to force division into equal parts using flexbox

    How can i make this css star smaller?

    How does one move html elements with scroll?

    How to display row of images in a repeater control vertically instead of horizontally

    how to make background-image included via a “class” responsive

    How to add styling (CSS) to tags in Javascript/Jquery

    How to achieve this button-border effect with CSS? (image included)

    How do I access separate points/sections on a single image in html/javascript?

    How to use a variable in my href path in html

    css footer background didn't shows properly in html5

    How to access an svg inner id and have CSS change the fill color of that id?

    How to use CSS import in Liferay? CSS fast load works bad

    How do I remove column padding to have full-width inputs in Bootstrap 3?

    Change how CSS border edges meet? [duplicate]

    How to use existing SVG symbols (in a file) as markers in highcharts?

    How to arrange div structure with radius using CSS