Jump to content
PrinceTaz

Center Div and Content Vertically

Recommended Posts

So I'm posting this in CSS because I think I'm having a CSS issue. Basically, I have this right now:

777579609_ScreenShot2019-06-02at7_26_47PM.thumb.png.e5cfe663b68216886f0b2a1e86ba6301.png

I'm trying to vertically center the blue box and everything inside it. I've tried line-height, vertical-align, display: inline-block, position relative and absolute. The only way that works is if I do it manually with absolute or margin. But absolute isn't responsive so that's a problem. I'm using Bootstrap from the CDN if that matters. I'm only going to include code for the first box so that it doesn't get messy. 

HTML:

<div class="container category-forums clearfix">
  <div class="container category-forums-wrap">
    <div class="container category-icon clearfix"></div>
    <div class="container forum-details-wrapper clearfix">
      <div class="container forum-details-container">
        <p class="forum-name">News Center</p>
        <p class="forum-desc">Stay up to date with all the latest news and, more importantly, familiarize yourself with the rules.</p>

        <div class="sub-forum-container container clearfix">
          <p class="sub-forums clearfix">Sub-Category 1</p>
          <p class="sub-forums clearfix">Sub-Category 2</p>
          <p class="sub-forums clearfix">Sub-Category 3</p>
        </div>
      </div>

    </div>

    <div class="container forum-threads clearfix">
      <h4>108</h4>
      <p>Threads</p>
    </div>
    
    <div class="container forum-posts clearfix">
      <h4>2000</h4>
      <p>Posts</p>
    </div>
    
    <div class="container forum-latest-posts clearfix">
      <div class="container last-avatar clearfix"></div>
      <p>Lastest thread</p>
      <p>Yesterday 3:15pm</p>
      
    </div>
  </div>
</div>

CSS:

.category-forums {
	width: 100%;
	height: 41%;
	background-color: #ecf0f1;
	padding: 0;
	border-bottom-left-radius:.25rem!important;
	border-bottom-right-radius:.25rem!important;
}
.category-icon {
	width: 7%;
	height: 100%;
	border-right: 1px dotted lightgray;
	margin: 0;
	float: left;
	line-height: 100%;
}
.category-forums-wrap {
	height: 70%;
	width: 100%;
	border: 1px dotted blue;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}
.forum-details-wrapper {
	width: 55%;
	height: 100%;
	border-right: 1px dotted lightgray;
	margin: 0;
	float: left;
	padding: 0;

}
.forum-details-container {
	width: 100%;
	height: 100%;
	border: 1px dotted gray;
	margin: 0;
}
.forum-name {
	margin: 0;
}
.sub-forum-container {
	width: 100%;
	float: left;
	margin: 0;
}
.sub-forums {
	width: 31%;
	margin: 0;
	float: left;
}
.forum-desc {
	margin: 0;
	font-size: 1.3rem;
}
.forum-threads {
	width: 9%;
	height: 100%;
	border-right: 1px dotted lightgray;
	float: left;
	text-align: center;
	line-height: 100%;
}
.forum-posts {
	width: 9%;
	height: 100%;
	border-right: 1px dotted lightgray;
	float: left;
	line-height: 100%;

}
.forum-latest-posts {
	width: 20%;
	height: 100%;
	float: left;
}
.last-avatar {
	width: 25%;
	height: 100%;
	border-right: 1px dotted lightgray;
	float: left;
	text-align: center;
	line-height: 100%;
}

I'm having a tough time even centering the text vertically. 

Share this post


Link to post
Share on other sites

Isn't that just a complicated way of saying that the parent row is too tall?

Share this post


Link to post
Share on other sites
9 hours ago, requinix said:

Isn't that just a complicated way of saying that the parent row is too tall?

Well the blue box would be the child and the white is the parent. Now the parent is inside a container which needs to auto increase in height depending on how many of the parent loop through it.

Share this post


Link to post
Share on other sites

That may be, but when I look at your screenshot I see two blue boxes with empty space below them. That means the parent is too tall, perhaps being forced by margins or padding or a tall descendant element, but tall nonetheless.

Centering the blue box inside the row will create half the space above and below it, which IMO is going to look a bit odd.

Share this post


Link to post
Share on other sites
30 minutes ago, requinix said:

That may be, but when I look at your screenshot I see two blue boxes with empty space below them. That means the parent is too tall, perhaps being forced by margins or padding or a tall descendant element, but tall nonetheless.

Centering the blue box inside the row will create half the space above and below it, which IMO is going to look a bit odd.

Ah okay I see what you mean. So the blue border was only added so I could show you guys what needed to be centered, it won't be there for the live copy. Once the blue box is centered inside the white parent box, I'll vertically center the content inside the blue box as well. The gray parent box below it will act the same way, the only difference is the shading of the parent background. Essentially, it's a forum layout. 

Share this post


Link to post
Share on other sites

Okay, good, I thought the blue border was weird.

Personally I wouldn't set a height directly on the row. What if the child is taller than expected? If you can rely on the child (er, children) being a certain height then that percentage height on the row can be just as easily converted to a percentage padding-top and -bottom. Which will get you centering.

Share this post


Link to post
Share on other sites
Posted (edited)
51 minutes ago, requinix said:

Okay, good, I thought the blue border was weird.

Personally I wouldn't set a height directly on the row. What if the child is taller than expected? If you can rely on the child (er, children) being a certain height then that percentage height on the row can be just as easily converted to a percentage padding-top and -bottom. Which will get you centering.

So I should just do it manually using padding percentages? On the blue box to center it?

https://taziamoma.com/Forum/

That is where it's uploaded.

Edited by PrinceTaz

Share this post


Link to post
Share on other sites

The .category-forums is height 41%. You could remove that and set padding-top/bottom 2%.

Alternatively, the .category-forums-wrap is height 70%, remove that and set margin-top/bottom 2%.

Or whatever values.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.