How Can I center Div

This topic has 10 replies, 2 voices, and was last updated 6 years, 10 months ago by Wes.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
June 20, 2017 at 10:13 am #21602
jamesc8913
Customer
Hi Wes, you recently provided me with the below code. It looks great, but I need to have it centered on the page. How can I do that? Thanks!

<div class=”one-third first”>

</div>

<div class=”one-third”>

</div>

<div class=”one-third”>

</div>
June 20, 2017 at 6:29 pm #21610
jamesc8913
Customer
Hi Wes, any ideas on this one?
June 21, 2017 at 1:09 pm #21618
Wes
Moderator
It should already be centered by default. Take a look at this link for example of how it should look – http://demo.appfinite.net/aspire/columns/
June 21, 2017 at 6:45 pm #21621
jamesc8913
Customer
I do see what you mean. However, it’s still not centered on the page. If you look at my “Recent Blog Post” grid on the Home page, they are center. The images underneath are shifted to the left. Is there any way to fix this?
June 22, 2017 at 5:20 am #21622
Wes
Moderator
Did you decrease the width and/or margins recently? I remember you asking how to reduce the space in between each div. If you did then that’s why it’s not showing perfectly centered.

If you adjust the width or margin, you have to make sure it’s done evenly so all of the divs show up centered in a row.
June 22, 2017 at 7:54 am #21623
jamesc8913
Customer
Oh no! I might have. Could you show me where to find how to fix that? My apologies for the learning curve…
June 22, 2017 at 3:28 pm #21626
Wes
Moderator
Look for the .one-third class inside the Column Classes section. It’s located around line 768
```
.one-third,
.two-sixths {
	width: 31.623931623931625%;
}
```
At the moment you have it set to 31, you can start off by changing it to 32 to see if that works. If you need the divs to spread more, then you’ll have to adjust the margin-left.

It looks like you changed the margin-left in this section (around line 759) –
```
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
	float: left;
	margin-bottom: 20px;
	margin-left: 1%;
}
```
June 23, 2017 at 7:45 am #21629
jamesc8913
Customer
Ah!! Now I remember why I changed the margin. (BTW, that did center everything back up) However, see below. Is there any way to tighten up the images, so they’re not spaced apart so far, without changing the margin again?
June 24, 2017 at 4:27 am #21632
Wes
Moderator
You can adjust the width and space in between each of those divs by following this recent post – https://appfinite.com/topic/pulling-my-hair-out-border-help/#post-21592

It’s based on the Width and the margin-left. You’ll have to calculate and adjust both to get it how you want it to appear.

It doesn’t have to be perfect, you can try testing with 32%, 33% etc rather than long random numbers. Either way will work the same, just make sure to adjust until you get the size you want and it will work.
June 24, 2017 at 10:12 am #21639
jamesc8913
Customer
Thank you Wes!
June 24, 2017 at 3:40 pm #21643
Wes
Moderator
You’re Welcome!
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘How Can I center Div’ is closed to new replies.