CODEWITHSUNDEEP
androidhtmlioscss
Gerardo Furtado
Gerardo Furtado

Reputation: 102174

Div center-aligned on Android but not on iPhone

My HTML has several inner divs with display: inline-block inside an outer div with text-align: center;. This is the expected behaviour: in a big screen, some divs will show up side by side (how many depends on the size of each inner div and the outer div) and the set will be center aligned. When the screen width gets narrower the divs will re-position, and in a small smartphone screen we'll have only one div per row, center-aligned.

This is my MCVE:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Align center</title>
  <style type="text/css">
    body {
      background-color: white;
    }
    
    div.container {
      margin: auto;
      max-width: 1000px;
      text-align: center
    }
    
    div.block {
      margin: 4px;
      display: inline-block;
      width: 320px;
      height: 400px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</body>

</html>

If you change the size of the window you'll see the divs repositioning (SO snippet is quite small to see this behaviour, but you can click "full page" and resize the window).

My problem:

In smartphones there is just 1 div per row, and this is exactly what I want. But my problem is that the div is not center aligned on iPhones, despite being perfectly aligned on Android phones.

Using the code above, this is the result in an Android phone, you can see that the white margins are the same on left and right:

enter image description here

But now on an iPhone:

enter image description here

The div is slightly positioned to the right.

What can I do to center-align the divs?

Note 1: I wrote Android and iPhone in the question's title because I'm not sure if this problem depends on the OS (Android vs iOs) or on the browser (mobile Chrome vs mobile Safari). I don't think this is a Safari problem, because the divs are OK on iPad and MacBook.

Note 2: It may not be an "alignment" problem: on iPhone, it's like the div was not "compressed" to fit the screen.

Upvotes: 0

Views: 2682

Answers (1)

Aman
Aman

Reputation: 155

Add this in your head tags, 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Remove div.container from your css

Change block css to 

.block {
    width: 100%;
    height: 400px;
    background-color: green;
    display: flex;
    justify-content: center;
    align-content: center;
}

if you want to show the blocks 3 at a time in 1 row in full screen: 

<div class="container">
    <div class="col-lg-4">
      <div class="block"></div>
    </div>
    <div class="col-lg-4">
      <div class="block"></div>
    </div>
    <div class="col-lg-4">
      <div class="block"></div>
    </div>
  </div>

Upvotes: 2

Related Questions