How to center image while also aligning text to the right of image?

Question

I'm trying to align an image in the center of the page while also aligning some text to the right of the image. How would I do this in either css or html?

Here is my current attempt at this:

.center-img {
    display: inline-block;
    margin: 0 auto;
}

.center-txt {
    display: inline-block;
}

<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
  <h1>Home</h1>
</div>

Right now the image is not centered and the text is not centered vertically with the image

Here is a visual representation of what I would like it to look like in the end:

What are your system requirements? IE 9+ or do you need 8, 7 or (God forbid) 6 support? — Joseph Marikle, Aug 26 '16 at 15:22
Sorry about the lack of info. I edited the post above. I couldn't find a place holder image originally — user1842633, Aug 26 '16 at 15:28

Angel Politis · Accepted Answer · 2016-08-26T16:01:57.263

Solution 1:

You can use a div to wrap the image and the text in and use text-align: center along with vertical-align: middle.

.center-img,
.center-txt {
  display: inline-block;
  vertical-align: middle;
}
#wrapper {
  text-align: center;
  border: 1px solid red;
}

<div id="wrapper">
  <img src="http://placehold.it/100x100" class="center-img" />
  <div class="center-txt">
    <h1>Home</h1>
  </div>
</div>

Solution 2:

Alternatively, you can use a div to wrap the image and the text in and use flexbox. Use justify-content to center your elements horizontally and align-items: center to align them vertically.

.center-img,
.center-txt {
  display: inline-block;
}
#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

<div id="wrapper">
  <img src="http://placehold.it/100x100" class="center-img" />
  <div class="center-txt">
    <h1>Home</h1>
  </div>
</div>

Now to center the above wrapper to the middle of the screen you can use:

#wrapper {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Example:

.center-img,
.center-txt {
  display: inline-block;
}
#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="wrapper">
  <img src="http://placehold.it/100x100" class="center-img" />
  <div class="center-txt">
    <h1>Home</h1>
  </div>
</div>

Thanks for the answer! I did have a quick follow up though. how would you change the code to add some left padding to the text while still keeping the picture in the same spot? — user1842633, Aug 26 '16 at 18:00
You can use **`.center-txt { margin-left: 20px }`**. If you want to put some space between the image and the text use **`margin`**, not **`padding`**. Using **`padding`** will still keep them right next to each other and push the child (**`h1`** in your case) to the direction you set it. Using either will produce the same result visually, but try enabling the border on everything to see the difference. — Angel Politis, Aug 27 '16 at 12:48

score 2 · Answer 2 · edited Aug 26 '16 at 16:03

We have a wrapper - div. Div have size 100% width and height of viewport. I give background to div pics and linear-gradient for darken. Div is a flex-block. Inner content aligned to center with justify-content (horizontal) and align-items (vertical). Its all.

ps: Sorry, sorry. Not its all. We go to drink a beer with this ladies. :)))

* {
  padding: 0;
  margin: 0;
}
div {
  background-image: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) 100%), url("http://beerhold.it/600/400");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
img {
  margin-right: 1em;
}

<div class="wrapper">
  <img src="http://beerhold.it/100/100">
  <p>Lorem ipsum</p>
</div>

Code-only answers are not useful. Explain what you've done, and why / how it works. This is a correct answer, and if you edit it to explain what you are doing and why it works, I'll upvote. — random_user_name, Aug 26 '16 at 15:30

score 0 · Answer 3 · edited Aug 26 '16 at 16:51

0

<div class="container">
    <img src="img.jpg"/>
    <div class="text">
        text
    </div>
</div>

.container{
    text-align:center;
}

img, .text{
    display:inline-block;
}

edited Aug 26 '16 at 16:51

Nisse Engström

4,738
23
27
42

answered Aug 26 '16 at 15:25

BritishSam

1,070
8
24

Code-only answers are not useful. Explain what you've done, and why / how it works. – random_user_name Aug 26 '16 at 15:28
@cale_b fair enough, will do in future :) – BritishSam Aug 30 '16 at 07:43

score 0 · Answer 4 · answered Aug 26 '16 at 15:32

0

To center the image use

 img.center{
display:block;
margin:0 auto;
}

answered Aug 26 '16 at 15:32

Aaron web dev

1

Perhaps a little explanation? – Roy Aug 26 '16 at 15:47

score 0 · Answer 5 · answered Aug 26 '16 at 15:39

wrap both image and text inside a container and add display:flex to it.

then, to center them use align-items: center; and justify-content: center;

see below snippet. let me know if it works for you

for more info about how to center vertically see here -> Vertical Centering with Flexbox

.center-img {
    display: inline-block;
    margin: 0 auto;
}

.center-txt {
    display: inline-block;
}
.container { 
  width:500px;
  height:500px;
  border:2px solid red;
  display: flex;
  align-items: center;
  justify-content: center;padding:0 15px;}

<div class="container">


<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
  <h1>Home</h1>
</div>
</div>

score 0 · Answer 6 · answered Aug 26 '16 at 15:57

Just add vertical-align: middle; to class center-img

The vertical-align property sets the vertical alignment of an element. Using middle place it in the middle of the parent element

.center-img {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

.center-txt {
    display: inline-block;

}

<img src="http://placehold.it/350x150" class="center-img"/>
<div class="center-txt">
  <h1>Home</h1>
</div>

score 0 · Answer 7 · edited May 23 '17 at 12:09

0

Use this-

<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Right Vertical aligned text</span>
</div>

Refer to this link.

edited May 23 '17 at 12:09

Community

1
1

answered Aug 26 '16 at 15:57

Sarthak Srivastava

1
4

score -1 · Answer 8 · answered Aug 26 '16 at 15:28

-1

Like this: https://jsfiddle.net/jn4rktaa/

HTML:

<div class="outside">
   <div class="inside">
      <img src='/img/file.jpg' class="img" />
      Test Text
   </div>
</div>

CSS:

.outside {
  width: 800px;
  height: 600px;
  border: 1px solid red;
  position: relative;
}

.inside {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  margin: 0 auto;
  top: calc(50% - 100px); /* THE VALUE (100PX) SHOULD BE HALF OF YOUR ELEMENT'S HEIGHT */
}

.img {
  float: left;
}

answered Aug 26 '16 at 15:28

Tyler Roper

21,445
6
33
56

He didn't ask that. He said "aligning some text to the right of the image". I figured the text was shown centered vertically just to display an example, not a strict requirement. – Tyler Roper Aug 26 '16 at 15:30
Hi, please refer this below fiddle, this is simple CSS that can work on all browsers. https://jsfiddle.net/jn4rktaa/2/ – Anshuk Aug 26 '16 at 15:58

How to center image while also aligning text to the right of image?

8 Answers8