I'm struggling to horizontally center three <h2> elements
#container {
margin: 0 auto;
width: 100%;
height: 3em;
}
h2 {
display: inline-block;
text-align: center;
width: 33%;
margin-left: auto;
margin-right:auto;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
I tried removing the white space by reformatting the HTML. I also tried using this site. I can't get the third element to sit inside the container.
Update: I followed jcuenod's advice. This seems to have solved the block level question of horizontal centering, but looking at the styling, I am now wondering why the headers are matching with their results. Here is what they look like now.
Shouldn't the h2's occupy the entirety of the container, given that they are centered across a container with 100% width?
The Problem
The problem is that you have widths that fill the horizontal space (mostly; 33%). But then your <h2> elements take up extra horizontal space because you add padding and border.
The Solution
Use box-sizing as follows:
box-sizing: border-box;
Explanation
MDN explains the border-box setting for box-sizing:
The width and height properties include the content, the padding and border, but not the margin.
MDN lists it as experimental but it has very good browser support.
#container {
width: 100%;
height: 3em;
}
h2 {
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 33%;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
just use display: block for <h2>
Add text-align:center; to the #container element.
Because your h2 elements are set to inline-block they don't occupy the full width of their container. That's why the centering is not working.
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I'm in the very early stages of creating a simple site. I'm trying to make a nav with 4 buttons that all take up 25% width inside an 800px container div. The buttons are all set to display inline-block and are 200px wide as they should be, but the 4th element is getting pushed onto a new line. Picture of issue.
At first I thought the border of the container div was messing things up, but i added box-sizing: border-box; and it didn't fix the issue. I then changed from a border on the container div to an outline, also with no luck. Using Chrome's Inspect Element tool, I can see that each button is 200px wide, yet they still won't fit on one line. HTML and CSS of these portions are below:
HTML
<h1>Midwestern Accent</h1>
<div id="nav_div">
<div class="nav_button button_border">Home</div>
<div class="nav_button button_border">About</div>
<div class="nav_button button_border">Music</div>
<div class="nav_button">Contact</div>
</div>
CSS
#content_div {
font-family: Arial, Helvetica, sans-serif;
margin: auto;
width: 800px;
background-color: black;
color: white;
/*border-width: 5px;
border-color: white;
border-style: solid;
box-sizing: border-box; */
outline: 5px solid white;
}
#nav_div {
border-style: solid;
border-color: white;
border-width: 0px 0px 5px 0px;
width: 100%;
vertical-align: top;
}
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
font-size: 30px;
vertical-align: top;
}
Inline block elements, like inline have natural spacing after them.
This is a good article on CSS tricks which explains different methods to getting around it.
Personally, I use the -4px margin-right fix.
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
margin-right: -4px;
font-size: 30px;
vertical-align: top;
}
I've seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be 'unhelpful' in the future even though google whips up a nice result summing some 55,000+ relevant results.
So, why won't padding-right work with a parent, and text-align right child?
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
}
The HTML
<div id="rightc">
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
</div>
Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code.
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
background-position: center right;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
cursor: pointer;
}
Live example
I think I understand your confusion.
What (I think) you're asking is why when you add padding to the left, it moves the content, but not when you add it to the right.
The answer is that padding makes the width of the div grow. So when everything is to the left (padding and text-align), the div gets wider and and the content is moved.
But when everything is to the right (padding and text-align) nothing moves...right? Wrong.
The div grows to the right the correct number of pixels adding the padding. And the content stays where it is because the offset is happening AFTER the content, not before like when you left align. It's easy to visualize with a border added.
Here is the code with no padding
http://jsfiddle.net/z5PJx/1/
You can see that the text is right up on the edge.
Here is the same code with padding-right: 50px;
http://jsfiddle.net/z5PJx/2/
Two things happened.
The div grew by 50px;
The content was moved left by 50px;
Those changes offset, and the content doesn't move.
In both situation the div's width grows to the right. But the direction of the padding changes.
Try this, on the container holding your text
.rightctext{ box-sizing: border-box; padding-right:10px;}
The box-sizing property will force the container object to take the padding on the right into account.
Hopefully that's what you're looking to achieve. *Note, adjust the px accordingly.
I have a <div id="content">, which contains <div id="sub-navigation> and <div id="main container">, which themselves are inline-blocks. I would like to be able to make the main container fill the rest of the available page width. Is that possible?
I need columns-strip to expand or shrink based on the number and width of column elements. If the width of the columns-strip exceeds the width of the main container, then a horizontal scroll bar should appear.
* {
margin: 0px;
padding: 0px;
font-size: 10pt;
white-space: normal;
}
#wrapper {
margin: 0px 20px;
background-color: red;
}
#header {
margin: 25px 10px 10px 10px;
height: 50px;
background-color: purple;
color: white;
}
#content {
margin: 10px;
padding: 10px;
font-size: 0pt;
white-space: nowrap;
overflow: hidden;
background-color: white;
}
#sub-navigation {
width: 200px;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
display: inline-block;
overflow: auto;
background-color: yellow;
}
#columns-strip {
padding: 10px;
font-size: 0pt;
white-space: nowrap;
background-color: mediumturquoise;
}
.posts-column {
margin: 0px;
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
overflow: auto;
}
#footer {
margin: 10px 10px 25px 10px;
height: 50px;
background-color: navy;
}
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="sub-navigation"></div>
<div id="main-container">
<div id="columns-strip">
<div class="posts-column" style="background-color: lightgray;"></div>
<div class="posts-column" style="background-color: darkgray;"></div>
<div class="posts-column" style="background-color: gray;"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
You have to remove the inline-block styles and float the #sub-navigation div. inline-block is not suited for what you are trying to achieve. When you add no display styles, the div element will be the default value which is block, block elements take up all the available space by default. By floating the #sub-navigation element you make it only take up the space required for its contents.
#sub-navigation {
width: 200px;
height: 150px;
float : left;
vertical-align: top;
background-color: forestgreen;
color: white;
}
#main-container {
padding: 10px;
overflow: auto;
background-color: yellow;
}
make sure to add a clear: left element after the #main-container
That's not how inline-blocks are supposed to be used. Best thing to do here is make your navigation box float:left and leave the default display value alone.
If your header, footer and wrapper have specific widths, then yes, you can have your main-container fill the available space. But if you're not specifying widths in your CSS, then you need to determine how big your main-container CAN be based on the rendered width of the containing element (wrapper). The only way to determine that width after the page loads is with javascript. If you want your site to have a dynamic width but still have your content (sub-navigation and main-container) fill the screen, you would either need to use javascript or percentages, and percentages can get ugly when you start looking at varying resolutions of monitors, laptops, etc...
Ever heard of flex box model!!
It is made just for that.
Note in flexbox model all child elements act as flex box model you cant opt out certain things. Which mean if page has navigation and under it content div + side div. You can't make top navigation out of it. Which has implications. So solution is to have all things only that need flex box in one div.
I'm trying to align the text in a h1 vertically to the middle, seeing as the text might wrap it needs to look nice whether it's 1 line or 2.
This is the css I use:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
The html is quite simply:
<h1>title</h1>
No matter what value I enter for vertical-align, the text is always at the top of the h1 element.
Am I miss-understanding the vertical-align property?
No CSS hacks needed. If I understand you correctly, then you can use this CSS:
h1 {
font-size: 12pt;
line-height: 10px;
padding: 10px 0;
}
See demo fiddle which equals a minimum height of 30px;
A note about vertical-align: that style only works in conjunction with - and is calculated with regard to - the line-height style. So setting line-height at 10px, putting text with height 12pt leaves no space to align at all. But setting line-height to 30px would result in too much space between more lines of text. This shows a trick for vertical aligning several lines of text, but that is only needed when you have a fixed height container. In this case the container's height (the h1 element) is fluid, so you can use this simple padding solution.
I dont know about vertical align, but if you add height property and set height and line-height properties same you get the vertical align: center effect
h1
{
font-size: 12pt;
line-height: 50px;
height: 50px;
}
Center the H1 title using flexbox align items center and justify content center, see this example:
div {
padding: 1em;
border: 1px dashed purple;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
}
<div>
<h1>Center this h1</h1>
</div>
Just add a float property and use padding-top: 50% for example:
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
position: absolute;
float: center; /* If you want it to be centered */
padding-top: 50%;
}
I used a CSS custom property (variable) and calc
:root {
--header-height: 100px;
}
* {
margin: 0;
padding: 0;
}
header {
font-size: 16px;
height: var(--header-height);
justify-content: space-evenly;
display: flex;
border-bottom: 1px solid #000;
}
h1,i {
font-size: 1.2rem;
display: inline-block;
padding-top: calc(var(--header-height) - 1.2rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
<img src="https://placekitten.com/100/100" alt="logo" height="100">
<h1>
Kitten Stories
</h1>
<i class="fas fa-lock"></i>
</header>
<div id="content">
<div id="outer">
<div id="header">Transport</div>
<div id="image">
<img src="../images/img1.jpg" style="width:300px;height:300px"/>
</div>
<div id="right_content">large amount of text</div>
</div>
</div>
For the above the css used is:
#content {
width: 100%;
min-height: 600px;
overflow: hidden;
border: 1px solid;
padding: 0;
margin: 0;
}
#outer {
border: 1px solid;
float: left;
overflow: hidden;
width: 100%;
min-height: 200px;
}
#header {
border: 1px solid;
width: 100%;
height: 20px;
background-color: #006A4D;
color: #ffffff;
padding: 10px;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 18px;
clear: both;
overflow: auto;
}
#right_content {
border: 1px solid;
overflow: hidden;
min-height: 300px;
padding: 10px;
float: left;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
#image {
border: 1px solid;
min-width: 300px;
min-height: 300px;
padding: 10px;
float: left;
overflow: hidden;
}
Both the inner divs are float:left. But the output comes as one div below the other. How can I get them to appear side by side?
Works fine for me at http://jsfiddle.net/gaby/zv4zG/
The thing to keep in mind is that if you do not specify widths for the floated elements, and they grow in size in order to accommodate their contents, they may reach a size (when added) that exceeds their container width. At that point they will break and one will go below the other.
So, you have to ensure that their added widths (and horizontal paddings and margins) will never exceed their containers width.
the outer div has a 100% width, witch tells the browser to ocupy all the available width, that's why the second div drops beneath.
The solution is simple, make sure both divs have enough width to be able to be side by side.
You don't need to float the #right_content, just add a left margin wide enough to accommodate the image and drop the overflow:
#right_content{
border: 1px solid;
min-height: 300px;
padding: 10px;
margin-left: 322px;
background-color: orange;
font: normal 12px Helvetica, Arial, sans-serif;
line-height: 18px;
}
Live example: http://jsfiddle.net/ambiguous/8m3LS/
I gave #image and #outer a width and #right_content a negative margin to account for the #image's space.
jsFiddle: http://jsfiddle.net/stealthyninja/Hn2Et/
DIVs are block-level elements, meaning that they will stack vertically by default. In order to make them appear side-by-side, you will also need to set display: inline; in your CSS.
UPDATE
I just created this jsfiddle and it looks like your layout is fine... not sure what the issue is. Could it be browser specific?
As we give width to one of the div, it leaves the extra space for next div, but make sure the width of both divs do not exceeds the browser's width, otherwise the second div will move below the first div. this css worked for me:
#left{
display:inline;
width:50%;
float:left;
}
#right{
float:left;
}
<div id="left">
left div
</div>
<div id="right">
right div
</div>