This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 7 months ago.
div.c {
width: 25px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
<body>
<div class="header" ,style="display: inline">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<h1>GeekForGeek</h1>
Here I want GeekForGeek to be in the center in the position which is marked yellow here
But it is getting displayed as shown in fig.
For example using a three columns layout (via display flex) on your header.
I made a demo to show the concept:
div.c {
/*width: 60px;*/
width: 60px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
}
.header > div {
/*border just for educational purpose.. remove it*/
border: dashed 3px gray;
flex: 33.33%;
}
.header h1{
text-align: center;
}
/*-----------------------*/
.contents{
border: dashed 3px gray;
margin-top: 1rem;
font-size: 1.5rem;
padding: 1rem;
}
.contents ol li{
margin-bottom: 1rem;
}
<div class="header">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<div>
<h1>GeekForGeek</h1>
</div>
<div>
</div>
</div>
<div class="contents">
<ol>
<li>I took the freedom to change the width of your hamburger menu selector, because it's common practice to have it more square shaped.. yours was very narrow in size;</li>
<li>The 3 columns layout grants you that the block in the middle will be perfectly centered related to the full width of the viewport;</li>
<li>The side effect is having to include the third column despite being empty;</li>
<li>The borders on header's blocks should be removed in the corresponding css rule and were added just to better show off the layout;</li>
</ol>
</div>
use flex and margin auto for h1
div.c {
width: 25px;
height: 10px;
background-color: black;
margin: 12px 0;
border-radius: 5px;
display: block;
}
.header {
display: flex;
}
h1 {
margin-left: auto;
margin-right: auto;
}
<body>
<div class="header" ,style="display: inline">
<div class="menu">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
<h1>GeekForGeek</h1>
</div>
Related
I am hoping to center my parent div height based on my child div height. My goal is to have 3 boxes with a shorter, but wider rectangle centered vertically behind it. Right now I have my parent div shorter and wider than the children, however I cannot seem to center it vertically.
Here is the ideal outcome:
Here is my current version (Please ignore minor differences with text and box colors). :
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Don't use a negative margin unless absolutely necessary. In this case, it is not. Use flex on parent with align-items: center;
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
}
#parent {
background-color: #f0f9fb;
max-height: 80px;
display: flex;
align-items: center;
}
#container {
margin-top: 50px;
margin-bottom: 50px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col ">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Without a sketch of what you are trying to do, I believe this is what you are wanting... You can just set a negative margin in the col divs in order to take them outside of the parent...
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: #f0f9fb;
}
.content {
width: 80%;
margin: 0px auto;
}
#container .col {
border: 1px solid #00acd4;
background-color: white;
padding-top: 2em;
padding-bottom: 2em;
position: relative;
margin-top: -20px;
margin-bottom: -20px;
}
<div id="container">
<div id="parent">
<div class="content">
<div class="row">
<div class="col">
<h3>$500</h3>
</div>
<div class="offset-1 col">
<h3>$3500</h3>
</div>
<div class="col offset-1">
<h3>50%</h3>
</div>
</div>
</div>
</div>
</div>
Forked your fiddle: https://jsfiddle.net/jstgermain/o6xhL92s/
*** RECOMMEND BELOW SOLUTION ***
#Betsy, I would recommend simplifying your HTML and using flexbox over the previous solution to your fiddle. You will want to make sure your behavior is consistent across browsers and devices. You can use media queries to change the size to eht col items for smaller devices.
#container {
margin-top: 50px;
margin-bottom: 50px;
}
#parent {
background-color: red;
/*#f0f9fb;*/
display: flex;
justify-content: space-evenly;
}
.col {
border: 1px solid #00acd4;
background-color: white;
padding: 1em;
width: 25%;
margin: -20px auto;
}
<div id="container">
<div id="parent">
<div class="col">
<h3>$500</h3>
</div>
<div class="col">
<h3>$3500</h3>
</div>
<div class="col">
<h3>50%</h3>
</div>
</div>
</div>
I'm building my own Pill component using HTML:
.panel1 {
width: 100%;
}
.panel2 {
width: 100px;
}
.pill {
display: inline-block;
}
.pill-content {
display: flex;
flex-direction: row;
font-size: 12px;
vertical-align: middle;
padding: 0px;
background-color: white;
border: solid;
border-width: 1px;
border-radius: 4px;
color: black;
border-color: blue;
background-color: white;
}
.pill-text {
flex: 1;
}
.pill-icon {
flex: 1;
max-width: 18px;
padding: 0px 5px 0px 5px;
}
<div class="panel1">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Why is that text breaking as it fits in width?
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
</div>
<div class="panel2">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Test
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Very big text that does not fit in width
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
<div>
</div>
My problems:
I need to position text always on the left side of the Pill.
I need to keep the close icon (I´m using an X here but that will be a font awesome icon) always vertically centered.
I can´t see why my text is breaking on panel1. I expected the text to break only when the panel size is smaller that text + icon.
Can I make that HTML/CSS simpler?
JSFiddle here
I've made some modifications to your code to give you the desired result:
/* recommended */
.panel1 *,
.panel2 * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.panel1 {
/*width: 100%; by default*/
}
.panel2 {
width: 100px;
}
.pill {
display: inline-flex; /* modified, since you're using flexbox */
}
.pill-content {
display: flex;
/*flex-direction: row; by default*/
font-size: 12px;
/*vertical-align: middle; has no effect here*/
align-items: center; /* now its vertically centered */
/*padding: 0; already covered*/
border: 1px solid blue; /* shorthand */
border-radius: 4px;
}
.pill-text {
/*flex: 1; not necessary, the culprit for breaking*/
}
.pill-icon {
/*flex: 1; not necessary since you're using max-width*/
max-width: 18px;
padding: 0 5px;
text-align: center; /* for horizontal alignment */
}
<div class="panel1">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Why is that text breaking as it fits in width?
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
</div>
<div class="panel2">
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Test
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
<div class="pill">
<div class="pill-content">
<div class="pill-text">
Very big text that does not fit in width
</div>
<div class="pill-icon">
X
</div>
</div>
</div>
</div>
Here are some simplification tips (as I cannot comment):
For all values that are 0, you can drop the units (px, etc.)
You can shorten your code by using the border shorthand: border: 1px solid blue. Luckily there's no need to specify each attribute individually
background-color: white; is specified twice for .pill-content, unless I'm missing something.
I am trying to achieve something that looks like this:
I don't know how many green elements will be rendered, because that is determined by the CMS and how many components the author decides to put in there.
The requirement is that there are 5 boxes per row before it wraps.
The problem is: margin: auto doesn't work when I set the red wrapper to inline-block.
div.container {
background: black;
padding: 10px;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
just add text-align center to div.container
As Muhammad Usman suggested, add text-align: center to .container. The text-align-property always refers to the content of the target element.
div.container {
background: black;
padding: 10px;
text-align: center;
}
div.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
}
div.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
Give the container div this property
text-align: center;
Here's a fiddle
Centering with margin: auto doesn't work for elements that have inline-block as display property.
You can, however, just center such elements by setting the text-alignment of their parent elements to center. Then, (re)set the text-alignment of the elements you want to center to whatever text-alignment you need there.
Demo
.container {
background: black;
padding: 10px;
text-align: center; /* Center */
}
.wrapper {
margin: 0 auto;
background: red;
padding: 10px;
display: inline-block;
text-align: left; /* Reset alignment */
}
.box {
display: inline-block;
background: lime;
padding: 10px;
margin: 0 10px;
}
<div class="container">
<div class="wrapper">
<div class="box">
Content 1
</div>
<div class="box">
Content 2
</div>
</div>
</div>
See also this Fiddle!
I have the following snippet of html that forms an X-Y scrollable listbox
* {
font-family: "consolas";
}
.listbox {
border: 1px solid black;
padding: 4px;
width: 150px;
height: 200px;
display: flex;
flex-direction: column;
}
.caption {
font-weight: bold;
background-color: #aaf;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: scroll;
}
.item {
background-color: #ddd;
padding: 2px;
padding-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
<div class="listbox">
<div class="caption">Caption</div>
<div class="content">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three (this has a longer bit)</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight (so does this)</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
</div>
It's working fine, with one problem, as the user scrolls from left to right, the background of the div seems to get left behind. It's as though the actual div only stretches the width of its parent, and the scrolling/overflow thing is "faked" somehow.
Why is this the case?
How do I address the problem? The behaviour I want is for all the items to appear to be the same width as the largest one.
Try adding a container <div class="items"> around the items set it to display:inline-block.
.items {
display: inline-block;
}
* {
font-family: "consolas";
}
.listbox {
border: 1px solid black;
padding: 4px;
width: 150px;
height: 200px;
display: flex;
flex-direction: column;
}
.caption {
font-weight: bold;
background-color: #aaf;
padding: 10px;
}
.content {
flex-grow: 1;
overflow: scroll;
}
.items {
display: inline-block;
}
.item {
background-color: #ddd;
padding: 2px;
padding-left: 6px;
margin-top: 4px;
white-space: nowrap;
}
<div class="listbox">
<div class="caption">Caption</div>
<div class="content">
<div class="items">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three (this has a longer bit)</div>
<div class="item">Four</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight (so does this)</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
</div>
</div>
Explanation: by default a block level element takes 100% width of the container no more than that, however an inline block will expand to content length if available e.g. in a scrollable container.
Also apply .items {min-width: 100%;} in case you want the background to grow full width even with less text in every row.
I have 3 div boxes which were perfectly aligned and centered, and then when I added text inside the divs, the parent div would stretch and resize to what was inside. I tried using resize: none on the child and parent elements, but that didn't do anything. Also tried using position:absolute; and relative.
HTML
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>
CSS
.boxes-parent {
margin: 0px auto;
text-align: center;
}
.left-box, .center-box, .right-box {
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
display: inline-block;
position: relative;
min-width: 25%;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
position: absolute;
resize: none;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
.blue-box-text {
resize: none;
max-width: 500px;
position: relative;
display: inline;
}
Result: https://jsfiddle.net/0wvyaqbo/
Also, my questions sometimes get downvoted. Have any advice on how I can better format this question? Trying to make it applicable for others. Thanks for all the help!
There are a couple things going on:
First, you have your .right, .center, .left divs set to inline-block. By default, they will always be the width of the content, because of inline-block. You need to set them to block. Also, .blue-boxes should be set to relative positioning, not absolute.
Here's updated CSS:
.boxes-parent {
margin: 0px auto;
text-align: center;
}
.left-box, .center-box, .right-box {
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
display: block;
position: relative;
width: 25%;
float:left;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
position: relative;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
.blue-box-text {
resize: none;
max-width: 500px;
position: relative;
display: inline;
}
And the updated fiddle:
https://jsfiddle.net/0wvyaqbo/1/
Another way to do this would be to use flexbox. Simply add display: flex and justify-content: center to .boxes-parent and change min-width to simply width for .left-box, .center-box, and .right-box. Resulting code looks like this:
.boxes-parent {
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
}
.left-box,
.center-box,
.right-box {
width: 25%;
padding: 10px 2% 0;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>
Alternatively, you could use flex: 1 1 25% for .left-box, .center-box, and .right-box. This forces them to grow and shrink with each other.
.boxes-parent {
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
}
.left-box, .center-box, .right-box {
flex: 1 1 25%;
padding: 10px 2% 0;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>
For more info on flexbox, css-tricks has a good reference sheet. Here's the support tables as well.
Parent elements likes divs are flexible by default and will resize to contain whatever you put in them (height) or whatever their parent element(s)/the browser is doing (width) unless you specify their dimensions. Use CSS width and height or max-width and max-height on the parent to limit its growth.
Generally, a flexible parent is preferred (see: responsive design), as some users may choose to modify the font your site is using, increase the font size to improve visibility, or view the site from a different device, and these actions can change the relative size of your content.
More info: http://www.w3schools.com/cssref/pr_dim_height.asp
You used min-width, and expected adding content wouldn't cause them to grow? Just use width.
Setting .blue-boxes { position: absolute; } caused those to shrink to the size of the content. You could add width: 100%;.
Since using absolute positioning can mess up layout, a solution that avoids it would be nice. When you remove the absolute positioning, the blue boxes are no longer aligned vertically. Set vertical-align: top; to fix that.
.boxes-parent {
margin: 0px auto;
text-align: center;
}
.left-box, .center-box, .right-box {
padding-top: 10px;
padding-left: 2%;
padding-right: 2%;
display: inline-block;
width: 25%;
vertical-align: top;
}
.blue-boxes {
background-color: #3498db;
height: 250px;
}
.blue-box-header-text {
padding-top: 20px;
font-size: 26px;
color: #fff;
}
.blue-box-text {
display: inline;
}
<div class="boxes-parent">
<div class="left-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">About</h1>
<p class="blue-box-text">I used to be better at CSS and HTML. Sorry!</p>
</div>
</div>
<div class="center-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Info</h1>
<p class="blue-box-text">Info info info.</p>
</div>
</div>
<div class="right-box">
<div class="blue-boxes">
<h1 class="blue-box-header-text">Contact</h1>
<p class="blue-box-text">Phone: (888) 888-8888</p>
</div>
</div>
</div>