Position image in the center with two lines of text that adjust gracefully based on screen size

Question

Position image in the center with two lines of text that adjust gracefully based on screen size

I am struggling to position an image alongside two lines of centered text. Currently, the image appears to the left of the text in my example, but what I really want is for the image to be centered with respect to the text and have a perfectly aligned image/text layout.

CSS:

.center-class{
  text-align:center;
}
.righty img{
  max-width:100px;
  float:left;
}
.vid-open{
}

HTML:

<section class="">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg" >
        <h2>This is a header.</h2>
        <h5 class="vid-open">some text some text some text<span class="icon-right-left-01-011" ></span></h5>
      </div>
    </div>
  </div>
</section>

VIEW DEMO

html css

Answer 1

Answer №1

To make the text appear centered and inline-block, you can enclose it in a div element and style it with CSS:

.center-class {
  text-align: center;
}

.righty > * {
  display: inline-block;
  vertical-align: middle;
}

.righty img {
  max-width: 100px;
}

<section class="power-of-egg">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg">
        <div class="con">
          <h2>This is an egg.</h2>
          <h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
        </div>
      </div>
    </div>
  </div>
</section>

Check out the updated Codepen here

Answer 2

To make the text appear centered and inline-block, you can enclose it in a div element and style it with CSS:

.center-class {
  text-align: center;
}

.righty > * {
  display: inline-block;
  vertical-align: middle;
}

.righty img {
  max-width: 100px;
}

<section class="power-of-egg">
  <div class="row pull-down">
    <div class="center-class">
      <div class="righty">
        <img src="http://www.psdgraphics.com/file/white-egg.jpg">
        <div class="con">
          <h2>This is an egg.</h2>
          <h5 class="vid-open">eggs are very nutritious<span class="icon-right-left-01-011" ></span></h5>
        </div>
      </div>
    </div>
  </div>
</section>

Check out the updated Codepen here

Answer 3

Answer №2

To align the entire block in the center, you can use the following CSS code:

.centered-block{
  text-align:center;
}
.float-right img{
  max-width: 100px;
  float:right;
}
.video-open{
}

.float-right {
  width: 300px;
  margin: 0 auto;
}

Answer 4

To align the entire block in the center, you can use the following CSS code:

.centered-block{
  text-align:center;
}
.float-right img{
  max-width: 100px;
  float:right;
}
.video-open{
}

.float-right {
  width: 300px;
  margin: 0 auto;
}

Answer 5

Answer №3

The issue arises from nesting your image within a block-level div element, causing it to stretch across the full width of its parent element.

To resolve this, simply remove the image from the div container and set the display property of the text-containing div to inline-block. This will constrain the div's width to match its content.

Check out the updated code snippet here: http://codepen.io/anon/pen/LNNJRQ

Answer 6

The issue arises from nesting your image within a block-level div element, causing it to stretch across the full width of its parent element.

To resolve this, simply remove the image from the div container and set the display property of the text-containing div to inline-block. This will constrain the div's width to match its content.

Check out the updated code snippet here: http://codepen.io/anon/pen/LNNJRQ

Answer 7

Answer №4

To center an element horizontally, you can utilize display: block; and margin: auto;. Although there may be alternative methods, this is the css I employed to align the image in the center with text positioned to its right:

.righty > .con {
  position: absolute;
  top:0;
  left: 55%;
}

.righty img {
  display: block;
  vertical-align: middle;
  margin: auto;
  max-width: 100px;
}

Please note: the positioning of the .con class may need adjustment based on screen size.

You can view the updated codepen for reference.

Answer 8

To center an element horizontally, you can utilize display: block; and margin: auto;. Although there may be alternative methods, this is the css I employed to align the image in the center with text positioned to its right:

.righty > .con {
  position: absolute;
  top:0;
  left: 55%;
}

.righty img {
  display: block;
  vertical-align: middle;
  margin: auto;
  max-width: 100px;
}

Please note: the positioning of the .con class may need adjustment based on screen size.

You can view the updated codepen for reference.

Position image in the center with two lines of text that adjust gracefully based on screen size

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Conceal the ::before pseudo-element when the active item is hovered over

What is the best way to eliminate the underline text decoration from a link element?

The embedded video on Youtube is not extending to fill the entire screen

Could someone provide an example to illustrate the concept of "em is relative to the font size and % is relative to the parent element"?

What is the most effective way to alter the text color using jQuery?

Display a loading image during the execution of the Exec_Shell Script

What is the method for formatting within the <textarea> element?

How to set a variable in a Python Selenium script based on webpage content

What could be the reason why the color of pixels X and Y is not being retrieved successfully in this

Determining if a Website is Responsive with PHP

The bootstrap table did not meet my expectations as I had hoped

Improving the efficiency of rendering multiple objects on a canvas

The box on my form is leaking my background color outside the 1px border, but only in Internet Explorer

Why isn't a password appearing in the "generated-password" div from the password generator?

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

utilize javascript to style iframe from an external domain without access to its DOM structure

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

"What is the best way to transform tab navigation into a dropdown menu with the help

How to Style Your ASP.NET Website: Utilizing a Stylesheet with Visual Studio 2010

Grid numbering with CSS in jQuery mobile design