Jump to content

Center Div and Content Vertically


PrinceTaz

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. 

Link to comment
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.

Link to comment
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.

Link to comment
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. 

Link to comment
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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.