Moving an Image in CSS

Question

I'm struggling to centre an image on a web page using HTML and CSS.

.header {clear:both; position: relative; display: block; padding: 70px 20px 20px 20px; font-size: 40px; background-color: grey;} 
    #webpic1 {text-align: center !important;} 
    .Title {margin: 5px; padding: 10px; height: 90px; font-family: 'Comfortaa', arial, sans-serif; font-weight: 900; text-align: center;}

 <div class="header"> 
    <div class="webpic"> 
    <img src="images/weblogo.png" alt="RRR" id="webpic1" height="230px" width="270px"> 
    </div> 
    <h3 class="title">RRR</h3>

Many Thanks In Advance

Your HTML is malformed (missing closing `div` tag) and it looks like your class name for the `h3` header is not lined up with what is in your CSS. — Tim Klein, Jan 03 '19 at 12:40
Here's the complete guide https://css-tricks.com/centering-css-complete-guide/ — Joykal Infotech, Jan 03 '19 at 12:49

score 1 · Answer 1 · answered Jan 03 '19 at 12:47

1

Use

.webpic {
  text-align: center
}

or

#webpic1 {
  display: block;
  margin: auto;
}

answered Jan 03 '19 at 12:47

Nafees Anwar

6,324
2
23
42

Tim Klein · Answer 2 · 2019-01-03T12:54:25.720

0

If you switch the target for your second style block to .webpic and enclose the img element in the same div, then your image should be centered.

.webpic {text-align: center !important;}

<div class="webpic"> 
  <img src="https://placeimg.com/640/480/any" alt="RRR" id="webpic1" height="230px" width="270px">
</div>

edited Jan 03 '19 at 12:54

answered Jan 03 '19 at 12:49

Tim Klein

2,538
15
19

score 0 · Answer 3 · answered Jan 03 '19 at 12:55

0

Just add this code in css file and your image is in center.

.webpic{text-align: center;}

If you want to center the image then you should text-align: center the above class or tag. thanks.

answered Jan 03 '19 at 12:55

faraz zaidi

9
1
1

Moving an Image in CSS

3 Answers3