I have a child div centered vert and horiz inside its parent with content inside centered as well using flex. However, The content and h2 stay side by side centered, I want them to stack.
.jumbotron {
position: relative;
min-height: 600px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
#s-text {
text-align: center;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
width: 70%;
margin: 0 auto;
}
#s-text h2 {
color: #fff;
margin-bottom: 20px;
padding: 0;
}
<div class="jumbotron" style="...">
<div id="s-text">
<h2> the_secondary_title </h2>
<p>multiple lines of content ...</p>
</div>
</div>
Use flex-direction: column;
.jumbotron {
position: relative;
min-height: 400px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0; padding: 0;
}
#s-text {
text-align: center;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70%;
margin: 0 auto;
}
#s-text h2 {
color: #000;
margin-bottom: 20px; padding: 0;
}
<div class="jumbotron" style="...">
<div id="s-text">
<h2> Heading </h2>
<p>multiple lines of content ...</p>
</div>
</div>
Related
I want to make a image (inside a div) to the most left of the bottom div and I don't how to do this.
For example I have this image
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
I'm new to html & css so I will appreciate your help making this image to the most left of his bottom div.
If you know the width of the div, it's easy. You can give the .applicationinfo element align-self: flex-start; and margin-left: 10%; (10% is calculated by this formula: (100% - widthOfDiv) / 2)
body {
background: black;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.applicationinfo {
align-self: flex-start;
margin-left: 10%;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
}
.settings {
display: flex;
width: 80%;
height: 40rem;
background-color: white;
align-self: center;
}
<main>
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
</main>
remove the flex direction, here's it
display: flex;
justify-items: flex-end;
align-items: flex-end;}
You can do it by positioning applicationinfo since you haven't styled it.
you can add parent position: relative; then child to absolute; then give child top: 0; left: 0;
.container {
display: flex;
height: 80vh;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
position: relative;
background: #222;
border: 1px solid yellow;
}
.applicationinfo {
width: 80%;
top: 0;
left: 0;
border: 1px solid green;
}
.applicationimage {
width: 60px;
height: 60px;
border-radius: 100%;
border: 1px solid blue;
}
.settings {
display: flex;
width: 80%;
height: 80%;
background-color: white;
align-self: center;
}
<div class="container">
<div class="applicationinfo">
<img src="https://wallup.net/wp-content/uploads/2019/09/1667-beautiful-gray-cat-748x468.jpg" class="applicationimage">
</div>
<div class="settings">
<span>hi</span>
</div>
</div>
I have a main container that contains an image and a div. What I want to achieve is to center the div on top of the image without having to use absolute or relative positioning on it. How can I achieve this? Thanks in advance.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
height: 30%;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
<div class="imgCon">
<!--center this-->
<div class="iconCon">
C
</div>
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
</div>
The only way I can think of without using absolute positioning or changing your markup is to use a CSS Grid and make both elements occupy the same cell.
.imgCon {
display: flex;
width: 95%;
height: 95%;
margin: auto;
background-color: blue;
display: grid;
}
.imgCon img {
width: 95.5%;
height: 95%;
margin: auto;
border-radius: inherit;
grid-column-start: 1;
grid-row-start: 1;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
grid-column-start: 1;
grid-row-start: 1;
}
<div class="imgCon">
<img src="https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg" />
<!--center this-->
<div class="iconCon">
C
</div>
</div>
You could use background-image property and tiny styling changes.
.imgCon {
display: flex;
justify-content: center;
align-items: center;
width: 20rem;
height: 20rem;
margin: auto;
background-color: blue;
background-image: url("https://www.vitalground.org/wp-content/uploads/2021/11/Bart-the-Bear-II--e1637176991443.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 80%;
}
.iconCon {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 3rem;
margin: auto;
color: #ffffff;
border-radius: 50%;
background-color: #000000;
}
.container {
display: flex;
justify-content: center;
align-item: center;
}
<div class="imgCon">
<div class="container">
<!--center this-->
<div class="iconCon">
C
</div>
</div>
</div>
I'm trying to align the text within my h2 element. I would like it to be centered vertically within the div. I'm working in .NET MVC
My html: (this is the only part giving me trouble)
Specifically:
.banner-side-container {
height: 240px;
width: 180px;
vertical-align: middle;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
I've tried adding vertical-align: middle; to all 4 selectors with no success.
Further info: the text-align: center; worked perfectly.
You can use flex and add the following settings to the three elements wrapping the h2s and their parent elements as follows:
display: flex;
flex-direction: column;
justify-content: center;
.banner-side-container {
height: 240px;
width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
im a bit lost:
im trying to make the space between 3 divs (horizontally) 40px, but it doesnt seem to work when i do it:
https://github.com/itsolidude/Tea_Cozy
i want the yellow marked parts to be 40px:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
top: 0;
}
#locations h2 {
flex: 1 0 100%; /* shorthand for: flex-grow:1;
flex-shrink: 0;
flex-basis: 100%; */
text-align: center;
position: absolute; /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
top: 1510px;
z-index: 3;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
#mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
#tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto 70px;
}
#tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}
.contact {
height: 200px;
}
#locations {
height: 500px;
width: 1200px;
margin: 0 auto;
background-image: url(../images/img-locations-background.jpg);
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.address {
background-color: black;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
}
#copyright {
text-align: left;
margin-left: 20px;
}
<div id="locations">
<h2>Locations</h2>
<div class="address">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
i put in the whole css. just in case something is affecting it. Pls explain what and why you did it :p
Don't use justify-content: space-between; as this will allot space depending on the available space.
Instead, center the flex-children and give them side margin of 20px (2 * 20px = 40px).
.wrap {
display: flex;
justify-content: center;
width: 90%;
margin: auto;
border: 1px solid grey;
}
.box {
background: #000;
width: 150px;
height: 150px;
margin: 20px;
}
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Alternatively, you could set a max-width of the parent container, thus making less available space for the children to spread out with the space-between style.
Bit confused here. I am quite tired, so I'm sure I'm making a silly mistake but here's my HTML/CSS:
.CAContainer {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
}
.CASideBorder {
height: 100%;
background: #000;
width: 8px;
}
.CAMiddleContainer {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.CATopBorder {
height: 8px;
background: #000;
width: 100%;
}
.CAMiddleTextContainer {
padding: 40px 80px 40px 80px;
font-size: 4em;
color: #000;
}
.CABottomBorderContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8px;
}
.CABottomBorderLeft,
.CABottomBorderRight {
flex: 1;
height: 100%;
background: #000;
}
<div class="CAContainer">
<div class="CASideBorder" id="CALeftBorder"></div>
<div class="CAMiddleContainer">
<div class="CATopBorder"></div>
<div class="CAMiddleTextContainer">
text
</div>
<div class="CABottomBorderContainer">
<div class="CABottomBorderLeft"></div>
<div class="CABottomBorderRight"></div>
</div>
</div>
<div class="CASideBorder" id="CARightBorder"></div>
</div>
And the fiddle.
Shouldn't CASideBorder be taking up 100% of its parent container, which has its height calculated by the text size and padding of CAMiddleTextContainer? Am I missing something really obvious here? Any help is appreciated.
That is because you have align-items: center for the flexbox in which case it will default to the content height.
What you need to do is to remove that (let align-items: stretch come into play as it is the default) and also remove the height:100% from CASideBorder.
See demo below:
.CAContainer {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
margin: 0;
padding: 0;
}
.CASideBorder {
background: #000;
width: 8px;
}
.CAMiddleContainer {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.CATopBorder {
height: 8px;
background: #000;
width: 100%;
}
.CAMiddleTextContainer {
padding: 40px 80px 40px 80px;
font-size: 4em;
color: #000;
}
.CABottomBorderContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 8px;
}
.CABottomBorderLeft, .CABottomBorderRight {
flex: 1;
height: 100%;
background: #000;
}
<div class="CAContainer">
<div class="CASideBorder" id="CALeftBorder"></div>
<div class="CAMiddleContainer">
<div class="CATopBorder"></div>
<div class="CAMiddleTextContainer">
text
</div>
<div class="CABottomBorderContainer">
<div class="CABottomBorderLeft"></div>
<div class="CABottomBorderRight"></div>
</div>
</div>
<div class="CASideBorder" id="CARightBorder"></div>
</div>