How to align left element inside a div with centered align

Question

I have a css that has a text-align: center, as I want most of my elements centered, however there is an element that I want to be towards top left.

I could do it by changing the margin-right: ??px. But I feel that this is not the best approach. Is there a better way to top left an element inside a text-align: center div.

dropbox contains the text-align: center. I want the img to be top left.

img {
  text-align: left;/*(does not work)*/
  margin-right: 95px;/*(works but dont think is the best approach)*/
}

.dropbox {
  text-align: center;
}

<div class="dropBox">
  <img src="pdf.jpg" id="pdf"/><br>
</div>

you are using dropBox in html and in css you wrote dropbox. – LKG Jun 20 '17 at 12:20 — LKG, Jun 20 '17 at 12:20

score 0 · Answer 1 · answered Jun 20 '17 at 12:18

0

Please try with position attribute for top and left to the image.

img {
       position:absolute; 
      top : 15px;
      left : 15px;
    }

    .dropbox {
      text-align: center;
      position : relative;
    }

answered Jun 20 '17 at 12:18

santosh

575
3
12

score 0 · Answer 2 · answered Jun 20 '17 at 12:19

0

Please see below. You had the dropbox class in your HTML spelled incorrectly.

.leftAlign {
  text-align: left;
}

.dropbox {
  width: 300px; /* only for demo */
  text-align: center;
}

<div class="dropbox">
  <p class="leftAlign">
    <img src="http://placehold.it/100" id="pdf">
  </p>
  <p>Dummy text</p>
</div>

answered Jun 20 '17 at 12:19

Gerard

15,418
5
30
52

Its right on the code but i miss typed when writing here thanks for noticing – Jun 20 '17 at 12:25

score 0 · Accepted Answer · answered Jun 20 '17 at 12:20

0

Just make the image a block element - nothing else necessary (see below)

img {
  display: block;
}

.dropBox {
  text-align: center;
}

<div class="dropBox">
  <img src="http://placehold.it/50x50" id="pdf"><br>
  some more text<br>
  some more text<br>
  some more text<br>
  some more text<br>
</div>

answered Jun 20 '17 at 12:20

Johannes

64,305
18
73
130

Thanks yes that did help. however, some inputs are now further down because of the img block. – Jun 20 '17 at 12:27
what do you mean by "inputs"? – Johannes Jun 20 '17 at 12:29
the img block takes up 100% width, so the subsequent elements will be below that. If you don't want that, you can assign the image `position:absolute` and `width` and `height` settings, and assign `position:relative` to its parent `.dropBox`. This will place the image into the upper left corner, but it might overlap other elements that way. – Johannes Jun 20 '17 at 12:33

Rob · Answer 4 · 2017-06-20T12:59:02.890

-1

.dropBox :not(img) { text-align:center; }

What happens is everything inside .dropBox will be centered as originally intended but "not" img elements.

This method will not affect other elements or the layout from using display or position as others suggest.

edited Jun 20 '17 at 12:59

answered Jun 20 '17 at 12:20

Rob

14,746
28
47
65

score -2 · Answer 5 · answered Jun 20 '17 at 12:15

-2

Try only align without text:

<img align="left">

answered Jun 20 '17 at 12:15

Hajrudin

145
3
13

That will be hard to pick up when reviewing code, say when they want to change the aligning. It's better to use CSS for styling. – marcellothearcane Jun 20 '17 at 12:17
He can put thath in his css img { align: left; } – Hajrudin Jun 20 '17 at 12:21
which your example doesn't show. the OP might not *know* they can put it in their CSS. – marcellothearcane Jun 20 '17 at 12:22
1

The `align` attribute is obsolete and shouldn't be used. – Rob Jun 20 '17 at 12:26
Thanks Rob. I didnt know that. – Hajrudin Jun 20 '17 at 12:29

How to align left element inside a div with centered align

5 Answers5