HTML Responsive website image center

Question

Hey i'm trying to center my images when someone is using an ipad basically below 780px but i am not able to get them to center no matter what i try? My menu and navigation bar are all centered just these images won't

This is on normal browser PC

This is the way it looks on tablet but i want to center it.

My code here

<div class="container">
    <section id="news">
        <div>
        <div class="tagline"><h3 class="white">Current News</h3></div>
            <div id="spacer"></div>
            <div class="box">
            <img src="images/joker.jpg" alt=""/> 
            </div>
            <div class="box">
            <img src="images/joker.jpg" alt=""/> 
            </div>
            <div class="box">
            <img src="images/timber.jpg" alt=""/> 
            </div>
    </div>
    </section>
    </div>

CSS here

@media screen and (max-width:979px){
    /*Global */
    .container {
    width: 95%;
    margin: auto;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
}
.box img{
    width: 300px;
    height: 300px;
    margin: auto;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    }
    .box {
    padding-bottom: 15px;
    margin: auto;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    }
}

Have you considered using bootstrap? Or flexbox? Making use of modern tools will save you the headache of trying to manage positions with CSS — Callat, Mar 19 '18 at 13:08
@Callat Every time somebody suggest "Use bootstrap!" to solve a simple layout issue this comes to mind ... https://i.stack.imgur.com/lRBds.jpg and this of course... https://meta.stackexchange.com/a/19492/180262 — Turnip, Mar 19 '18 at 13:13
I tried text-align or display block. I tried many ways that's why i ran out of options and came here — Tomas Studnicky, Mar 19 '18 at 13:22
Then you should post your code in fiddle version from where we can get idea, there can be impact from other code. We don't know what you tried or not . — Hanif, Mar 19 '18 at 13:25

score 2 · Accepted Answer · answered Mar 19 '18 at 13:21

2

you can try: {

display:flex;
justify-content:center;

}

answered Mar 19 '18 at 13:21

eddy Salibi

34
4

1

Thank you that solved my issue – Tomas Studnicky Mar 19 '18 at 13:29
Any idea how i would center text 3 boxes again – Tomas Studnicky Mar 19 '18 at 21:00

score 0 · Answer 2 · answered Mar 19 '18 at 13:28

0

You can use flexboxes.

.box {
  display: flex;
  justify-content: center;
  justify-items: center;
}

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

answered Mar 19 '18 at 13:28

Roman Kiyashev

150
1
11

score 0 · Answer 3 · answered Mar 19 '18 at 13:33

You should restructure your HTML by adding a container around the boxes:

<div class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

Use flexbox for the container and give the boxes equal space in the screen with the flex property:

/* Only for demo purposes */

body, html {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden; 
}

/* Main part: flexbox is added to the container box and the flex property allots them equal space with a margin of 10px as well */

.box-container {
    width: 100vw;
    display: flex;
}

.box {
    flex: 1 0 0;
    width: 120px;
    height: 120px;
    background-color: red;
    margin-right: 10px;
}

Here is a link to the fiddle: jsfiddle

You can center the text by using flexbox for the each box and setting the 'justify-content' property to 'center' and 'align-items' to 'center' as well — Chirag Bhansali, Mar 21 '18 at 07:26

HTML Responsive website image center

3 Answers3