How can I center align the contents of a div?

Question

<div class="sc-content-footer container">
<div class="row">
<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>

<div class="col-md-4">
<img src="images/BSY_LOGO_SIGNAGE.png">
</div>

<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>

Nothing seems to work, text-align: center does nothing. The content inside the 3 divs is: mailchimp form, logo, mailchimp form

You can add class `text-center` on cols https://jsfiddle.net/Lg0wyt9u/2448/ — Nenad Vracar, Nov 02 '17 at 16:18
Have you tried using Bootstrap's `text-center` class? https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L8330 — j08691, Nov 02 '17 at 16:18
could you please provide your stylesheet specifically the .container class? — Tebogo Khanye, Nov 02 '17 at 16:21
[Did you look here?](https://stackoverflow.com/search?q=center+div+bootstrap) — Rob, Nov 02 '17 at 16:34

score 3 · Answer 1 · answered Nov 02 '17 at 16:26

text-align: center only works if the element you are aligning has display: inline-block.

Also text-align: center is not on the element you are aligning, but on the parent of the element you are aligning.

.inner {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.outer {
  blackground-color: yellow;
  width: 100%;
  text-align: center;
}

<div class="outer">
<div class="inner">

</div>
</div>

score 2 · Accepted Answer · answered Nov 02 '17 at 16:42

...I wish I had spent a little more time before asking here. I apologize to everyone, I am new to web design and I got frustrated. Won't happen again.

The problem was Mailchimp's custom CSS. I removed the CSS stylesheet imports from the form HTML, and added Bootstrap classes to the textboxes and buttons. Now everything is fine and dandy.

score 1 · Answer 3 · answered Nov 02 '17 at 16:21

1

in css the outer DIV has:

position: relative;

and inner DIV has

position:relative; margin:0 auto;

try this, this is correct form.

answered Nov 02 '17 at 16:21

Michel Simões

234
3
8

score 0 · Answer 4 · answered Nov 02 '17 at 16:30

0

It becomes tricky when the <div> tags are nested, but please try:

.container
{         
     width: 50%; 
     margin: 0 auto;
}

.row
{
   display: inline-block;
   text-align: center;
}

answered Nov 02 '17 at 16:30

Tebogo Khanye

380
1
7
18

score 0 · Answer 5 · edited Nov 02 '17 at 17:14

Since you're using Bootstrap, you can simply use a Bootstrap class (text-center) to center align the div content.

Edit your code to something like this:

<div class="sc-content-footer container text-center">
<div class="row">
<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>

<div class="col-md-4">
<img src="images/BSY_LOGO_SIGNAGE.png">
</div>

<div class="col-md-4">
<!-- Begin MailChimp Signup Form -->
</div>
</div>
</div>

You can also put the text-center class in the children div if you are still having problems after running the above code.

How can I center align the contents of a div?

5 Answers5