I want to exclude the h2 element(inside the h2 div) so I can center the main title only. But when I use this command it aligns both titles to the center.
.container:not(.h2) {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<h1>welcome</h1>
<div class="h2">
<h2>Hi</h2>
</div>
</div>
Need to align only one element.
To use this approach you'll need to use the child combinator >. This says "match the elements that are direct children of the .container class and do not have the .h2 class"
.container > :not(.h2) {
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<h1>welcome</h1>
<div class="h2">
<h2>Hi</h2>
</div>
</div>
Your original CSS .container:not(.h2) is saying "select an element that has both the .container class and does not have the .h2 class" - .container fits that so it applies the styles to the whole div.
In practice for this example you could just use text-align: center; on your h1, make different flexbox containers, or use more specific element selectors rather than using the parent .container class.
Related
HTML
<div id="flexbox-container">
<h1 id="test1">test1</h1><h1 id="test2">test2</h1><h1 id="test3">test3</h1>
</div>
CSS
#flexbox-container {
display:inline-flex;
}
#test1 {
float:left;
}
#test2 {
justify-content:center;
align-items:center;
text-align:center;
align-self:center;
align-content:center;
}
#test3 {
position:relative;
left:1000px;
}
Why does test2 not center itself in the flex? I would prefer not to have to set px or margin to get it to centre. I tried all sorts of aligning stuff on it yet it still sticks to the left. I need the three items to be inline, so setting it to flex wouldn't work (though it does center align if I make it flex), PLEASE HELP IVE BEEN TRYING FOR DAYS
https://codepen.io/throwaway123/pen/mdpJJKY
Only this much code is enough. No need for all those styles for separate h1 tags. You have to give the aligning styles to the parent div.
#flexbox-container {
width: 100%;
display:inline-flex;
justify-content: space-between;
}
<div id="flexbox-container">
<h1 id="test1">test1</h1>
<h1 id="test2">test2</h1>
<h1 id="test3">test3</h1>
</div>
Basically that isn't how flex works.
You don't want the contents of the second item to be justified within itself, you want the container to have that element centered.
If you scrap all the positioning of the three items you can get flex to do the work for you. There are several ways of telling it how you want the items set out in the line. For example justify-content: space-between.
From MDN:
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
#flexbox-container {
display: inline-flex;
justify-content: space-between;
width: 100vw;
}
<div id="flexbox-container">
<h1 id="test1">test1</h1>
<h1 id="test2">test2</h1>
<h1 id="test3">test3</h1>
</div>
Using IDs for css is bad practice. I'd suggest you to start using class selectors
Anyway, here is solution to your problem :
<style>
#flexbox-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
If you want the h1 tags centered too you can wrap the h1 tag by a div. Then you can assign the div text-align: center CSS Property.
#flexbox-container {
background: green;
display:flex;
justify-content: space-between;
text-align: center;
}
#flexbox-container div {
width: 100%;
}
<div id="flexbox-container">
<div>
<h1 id="test1">test1</h1>
</div>
<div>
<h1 id="test2">test2</h1>
</div>
<div>
<h1 id="test3">test3</h1>
</div>
</div>
I have a
<div class="parent">
<div class="child" style="float:right"> Ignore parent? </div>
<div> another child </div>
</div>
The parent has
.parent {
display: flex;
}
For my first child, I want to simply float the item to the right.
And my other divs to follow the flex rule set by the parent.
Is this something possible?
If not, how do I do a float: right under flex?
You can't use float inside flex container and the reason is that float property does not apply to flex-level boxes as you can see here Fiddle.
So if you want to position child element to right of parent element you can use margin-left: auto but now child element will also push other div to the right as you can see here Fiddle.
What you can do now is change order of elements and set order: 2 on child element so it doesn't affect second div
.parent {
display: flex;
}
.child {
margin-left: auto;
order: 2;
}
<div class="parent">
<div class="child">Ignore parent?</div>
<div>another child</div>
</div>
You don't need floats. In fact, they're useless because floats are ignored in flexbox.
You also don't need CSS positioning.
There are several flex methods available. auto margins have been mentioned in another answer.
Here are two other options:
Use justify-content: space-between and the order property.
Use justify-content: space-between and reverse the order of the divs.
.parent {
display: flex;
justify-content: space-between;
}
.parent:first-of-type > div:last-child { order: -1; }
p { background-color: #ddd;}
<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>
<div class="parent">
<div class="child" style="float:right"> Ignore parent? </div>
<div>another child </div>
</div>
<hr>
<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of
divs in the mark-up</p>
<div class="parent">
<div>another child </div>
<div class="child" style="float:right"> Ignore parent? </div>
</div>
Use justify-content: flex-end; in parent:
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: flex-end;
more info
display: flex;
flex-wrap: wrap;
justify-content: space-between;
I have below markup for testing flexbox:
<html>
<head>
<style>
.parent{
display: flex;
flex-direction: column;
}
.parent>div>button{
display: flex;
}
.parent>div:nth-child(2){
display: flex;
}
</style>
</head>
<body>
<div class="parent">
<div class="div1"><button>butt1</button><button>butt7</button></div>
<div class="div2"><button>butt2</button><button>butt3</button><button>butt4</button>
<button>butt5</button><button>butt6</button></div>
</div>
</body>
</html>
Its output is given below:
What I don't understand is that even if we haven't given any flex-direction: column to the div1 i.e., we haven't written:
.parent>div>button{
display: flex;
flex-direction: column;
}
even then butt1 and butt7 are aligned in column. Why they are not aligned in row?? Is it the case that child div inherits the value of flex-direction of parent? I have read that default value of flex-direction is row. So, with that logic as well, they should have been aligned row-wise, not column-wise.
Please help me to find the reason of above behaviour.
Thank You.
The problem is in this:
.parent>div>button{
display: flex;
}
You overwritten default style of button, which is display: inline-block. display: flex works for children not for element itself, so your buttons behave like normal div (display: block). If you want to use flex in your way even if it's inappropriate change it to display: inline-flex.
More precise information directly from specification:
flex -
This value causes an element to generate a flex container box that is block-level when placed in flow layout.
inline-flex - This value causes an element to generate a flex container box that is inline-level when placed in flow layout.
#IMPROVEMENT
You have a lot of code that is not needed.
You can achieve same result by:
.parent > div {
display: flex;
}
<div class="parent">
<div>
<button>butt1</button>
<button>butt7</button>
</div>
<div>
<button>butt2</button>
<button>butt3</button>
<button>butt4</button>
<button>butt5</button>
<button>butt6</button>
</div>
</div>
If you want to apply a flex to the div1 do it like this:
.parent>.div1{
display: flex;
}
See here, I've added a background color for you to see what's going on:
.parent {
background: red;
display: flex;
flex-direction: column;
}
.parent>.div1 {
background: blue;
margin: 10px;
display: flex;
}
.parent>div:nth-child(2) {
background: green;
margin: 10px;
display: flex;
}
<div class="parent">
<div class="div1">
<button>butt1</button><button>butt7</button>
</div>
<div class="div2">
<button>butt2</button><button>butt3</button><button>butt4</button>
<button>butt5</button><button>butt6</button>
</div>
</div>
this line of CSS is the issue:
.parent>div>button{
display: flex;
}
You are telling css CSS using > that rules will be applied to elements which are direct children of the .parent -> div -> button element.
.parent {
display: flex;
flex-direction: column;
}
.parent>div:nth-child(2) {
display: flex;
}
<div class="parent">
<div class="div1"><button>butt1</button><button>butt7</button></div>
<div class="div2"><button>butt2</button><button>butt3</button><button>butt4</button>
<button>butt5</button><button>butt6</button></div>
</div>
I want to center all the text in BodyAbout.js. Text-align isn't working nor is padding-left of left. I'm not repeating the class name and thats I can think is reason its not working.
function BodyAbout() {
return (
<div className='Body__About'>
<div className='Body__Header'>
<h2>About</h2>
</div>
<div className='Body__Paragraph'>
<p>Founded in 2010, we are a creative agency that</p>
<p>produces lasting results for our clients. We’ve</p>
<p>partnered with many startups, corporations, and</p>
<p>nonprofits alike to craft designs that make real</p>
<p>impact. We’re always looking forward to creating</p>
<p>brands, products, and digital experiences that</p>
<p>connect with our clients' audiences.</p>
</div>
</div>
BodyAbout CSS
.Body__About {
background-color: #e7816b;
height: 30em;
text-align: center;
}
BodyAbout is the component
function About() {
return (
<div>
<Navbar />
<AboutUsImage />
<BodyAbout/>
<WorldClassImg />
<MidPageDescAboutDesign Title='World-class talent'/>
<LandmarkImages Circle='/images/bg-pattern-small-circle.svg'/>
<RealDeal />
<MidPageDescAboutDesign Title='The real deal'/>
<AboveFooter />
<Footer />
</div>
)
}
text-align will only center the element's inline contents, it does not center the element itself.
If it is a block element (a div), you need to set margin: 0 auto;
What it does
The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto, this will automatically put the elements content in the center. This only works if the block element in question has a known width (fixed or relative), otherwise it may not work.
If it is an inline-element, set text-align: center; on its parent element instead.
Alternatively you could just target the elements children in css, something like this may work:
.Body__About .Body__Paragraph p{
text-align: center;
}
You may not need the p tag but I included it just in case, that will center align all the p elements inside Body_Paragraph
p is commonly a block-level element and may have text-align: left assigned to it from another CSS. Try:
.Body__About {
background-color: #e7816b;
height: 30em;
}
.Body__Paragraph p {
text-align: center;
}
Try these
.Body__About {
display: flex;
justify-content:center;
}
Try adding these three style properties to the container
.Body__About{
display: flex;
align-items: center;
flex-direction: column;
}
For vertical and horizontal alignment, please use the below code
.Body__About {
display: flex;
align-items: center;
justify-content: center;
}
I'm new to using css grid, and I am trying to position two items within a single grid cell using flexbox to position the items. There is a logo on the left and a nav bar on the right, but the nav bar is not centered within cell "a", it appears to go below the lower boundary of cell "a" (I tried to upload a jpeg image, but Stack Overflow is having problems right now accepting image uploads, see Image upload fails with "imgur is rejecting the request").
Here is the html code:
<div class="a">
<div class="a_left">
Logo for Project
</div>
<div class="a_right">
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</div>
Here is the css code:
.a{
display: grid;
font-family: sans-serif;
color: green;
font-size: 16pt;
}
.a_left{
display: flex;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
}
.a_right{
display: flex;
height: 100%;
flex-wrap: nowrap;
justify-content: right;
vertical-align: right;
}
.topnav {
align-content: right;
justify-content: center;
overflow: hidden;
background-color: #333;
height: 100%
}
The grid container is "a", and the nav bar is in the a_right flexbox. I have tried a lot of the likely height, width and centering properties without success, but I don't know if the property should be applied to a or to a_right.
Thanks for any help centering this nav bar.
If you want to have the logo on the left and menu on the right, you can simply do:
.a {
display: flex;
justify-content: space-between;
}
<div class="a">
<div class="a_left">
Logo for Project
</div>
<div class="a_right">
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</div>
Flexbox is a container for centering its children - right now it looks like you're making the children into flexboxes, which won't do you a whole lot.
If you need to maintain the "grid" display property, add a container for both your logo and nav bar. This is the container that you will want with display:flex, and it will be the container that you apply your flex-related alignment properties to.
Also, to vertically align content in a flexbox, use align-items. Horizontal alignment requires justify-content.
So you set your element .a to be a grid container:
.a {
display: grid;
}
… and you want to know why the children (.a_left and .a-right) are stacking vertically instead of on the same row.
The reason is that you haven't defined explicit tracks with grid-template-columns or grid-template-areas. Because you haven't defined explicit columns, grid-auto-columns comes into play to create implicit columns.
The default value of grid-auto-columns is auto, which essentially allows each grid item to occupy an entire row. That's what you're seeing; it's like block elements stacking.
Try this instead:
.a {
display: grid;
grid-template-columns: auto 1fr; /* define explicit columns */
color: green;
font-size: 16pt;
}
.a_left {
display: flex;
}
.a_right {
display: flex;
justify-content: center;
}
.topnav {
background-color: yellow;
}
<div class="a">
<div class="a_left">Logo for Project</div>
<div class="a_right">
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
You may also want to read this post about centering elements on a row having other elements: Center and right align flexbox elements