This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I have the following HTML/CSS code which results in two images Logo.jpeg and Banner1.jpg to be on the same line, one after the other.
I would like to put space between the two, resulting Banner1.jpg to be centered, while Logo.jpeg should stay aligned to the left.
Tried several solutions like margin-left/margin-right, padding, align and others with no avail.
HTML
.logo h1 {
font-size: 40px;
margin: 20px 0;font-weight: 400;
display: inline-block;
}
.logo h2 {
font-size: 40px;
margin: 20px 0;font-weight: 400;
display: inline-block;
}
<div class="site-branding-area">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="logo">
<h1><img src="img/Logo.jpeg" height="725" width="200"></h1>
<h2><img src="img/Banner1.jpg" height="150" width="350"></h1>
</div>
</div>
Can anyone help me understand how to fix it so to have Logo.jpeg align to the left and Banner1.jpg centered?
Thanks, take the chance to wish you a good day, Michele
You could make the .logo container a CSS Flexbox so both the images are aligned in a row. Then use justify-content to define how the browser should distribute space between the flex items along the main-axis (ie x-direction). Next, you can center the second image by selecting the .logo h2 container which holds the nested <img> and applying auto left and right margins to evenly center it on the page.
Now the sidebar image is aligned to the left of the viewport and the banner image is centered. Try this out.
.logo h1 {
font-size: 40px;
margin: 20px 0;font-weight: 400;
display: inline-block;
}
.logo h2 {
font-size: 40px;
margin: 20px auto;
font-weight: 400;
display: inline-block;
}
.logo {
display: flex;
align-items: center;
justify-content: space-between;
}
img {
max-width: 100%;
}
<div class="site-branding-area">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="logo">
<h1><img src="https://horizon-media.s3-eu-west-1.amazonaws.com/s3fs-public/field/image/whale-wave.jpg" height="725" width="200"></h1>
<h2><img src="https://images.squarespace-cdn.com/content/v1/52e1b262e4b06ef060506756/1568644386677-SJGPE3UI0QRLVFE2GK8G/ke17ZwdGBToddI8pDm48kGwqNa-TSATgABi909OK27Z7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UQSxQa_pE67Ig1CszvlZo11NCLvqIlshiNC_JCcjnOmqOV4zqrbdg_2AqIEjj1Z3Fg/Hero.jpg?format=1500w" height="150" width="350"></h1>
</div>
</div>
you may add this css with your css and test
.logo {
display: flex;
justify-content: space-around;
}
Related
What I have is the following:
I have an icon on the left that represents a product. Then in H1, I have a product category, and with an h2, I have a product name.
The icon, h1, and h2 are in a parent div with flex and align-items value of baseline. So the text is baseline aligned.
Due to the dynamic nature of how the page title here is retrieved, the icon has to be in this parent div that is baseline aligned.
How can I vertically center the icon within this parent div with flexbox? I know how to accomplish this with vertical alignment and setting line height, but I'd prefer a flexbox approach.
Parent:
.parent {
display: flex;
align-items: baseline;
}
HTML skeleton:
<div class="parent">
<div>Icon</div>
<div>Product Category</div>
<div>Product Name</div>
</div>
Use baseline and center vertical alignment in combination
In the snippet below, I've added a wrapper div to hold the text elements together which get aligned around their baseline. The parent div will align its children vertically center, so that the icon and the text block will be nicely aligned.
.parent {
display: flex;
align-items: center;
font-family: sans-serif;
}
img {
border-radius: 100px;
margin-right: 8px;
}
.text {
display: flex;
align-items: baseline;
}
h3 {
font-size: 24px;
line-height: 32px;
}
p {
font-size: 16px;
line-height: 24px;
}
h3+p {
margin-left: 12px;
}
<div class="parent">
<img src="https://picsum.photos/50" alt="icon" />
<div class="text">
<h3>Product Category</h3>
<p>Product Name</p>
</div>
</div>
You can set align-self:center on the icon if you cannot change the parent div's align-items value to center. Find below an example:
.parent {
display: flex;
align-items: baseline;
gap:1rem; /* added just for readability, you can remove it */
}
.parent div:first-child{
align-self:center;
}
<div class="parent">
<div>Icon</div>
<h1>Product Category</h1>
<h2>Product Name</h2>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
.header_main_page_portal {
background-color: white;
height: 80px;
width: 100%;
}
.image_login_portal {
width: 500px;
}
.image_login_portal img {
margin: auto;
display: block;
}
.title_main_page {
justify-content: center;
display: flex;
margin: 0 auto;
width: 100%;
}
<div class="header_main_page_portal">
<div class="image_login_portal">
<img src="http://127.0.0.1:8000/storage/diba/images/logo-portal.png" class="logo-nav_portal_main_page" alt="logo-client">
</div>
<div class="title_main_page">
<h6>PÀGINA PRINCIPAL</h6>
</div>
</div>
I have a div that acts as a header, occupying 100% of the width of the screen.
Inside this div, I have another one with the logo on the left side.
Next to this I have another div with an h6 centered inside this last div.
My problem is that the title div starts when the photo ends, so the h6 doesn't appear centered on the screen. Although it is inside the div.
<div class="header_main_page_portal">
<div class="image_login_portal">
<img src="XXXX" class="logo-nav_portal_main_page" alt="logo-client">
</div>
<div class="title_main_page">
<h6>MAIN PAGE</h6>
</div>
</div>
Thanks!! :D
This question already has answers here:
Why are flex items not wrapping?
(2 answers)
Closed 1 year ago.
viewport small I've made a website that has 6 icons in the bottom, 3 in each row. when I resize the window so it becomes like the width of a phone, it becomes kinda weird and some of the icons go out. screenshots attached.
a img{
border-radius: 50%;
}
a {
padding: 5%;
}
#channels {
display: flex;
justify-content: center;
}
figcaption {
font-size: larger;
}
#contact {
display: flex;
justify-content: center;
}
<div id="channels">
<img src="images/ferglogo.jpg" alt=""><figcaption>iFerg</figcaption>
<img src="images/fergplays.jpg" alt=""><figcaption>iFerg - Plays </figcaption>
<img src="images/ferglive.jpg" alt=""><figcaption>iFerg - Live</figcaption>
<img src="images/fergclips.jpg" alt=""><figcaption>iFerg - Clips</figcaption>
</div>
<hr>
<h2>Contact</h2>
<div id="contact">
<img src="images/twitter.jpg" alt=""><figcaption>Twitter</figcaption>
<img src="images/instagram.jpg" alt=""><figcaption>Instagram</figcaption>
<img src="images/facebook.jpg" alt=""><figcaption>Facebook</figcaption>
<img src="images/discord.jpg" alt=""><figcaption>Discord</figcaption>
</div>
(Credits to #vio)
Use the flex-wrap: wrap; property
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I'm using flex to put an image and a text in 1 line. I'd like to horizontally align the two. align-items: center didn't work at all.
align-items: flex-start; kind of horizontally aligned the two, but it's not precise.
Not sure what's going on here. I'm looking align the two horizontally very precisely, help would be appreciated. I tried adding style="vertical-align:middle;" to <img>, but didn't work either.
.entrepreneur {
display: flex;
align-items: flex-start;
vertical-align: middle;
}
.entrepreneur img {
width: 35px;
margin-top: 0;
margin-bottom: 0;
}
.entrepreneur #text {
margin-left: 10px;
margin-top: 0;
margin-bottom: 0
}
<div class="entrepreneur">
<img src="img/Mark.jpg" alt="">
<p id="text">Mark</p>
</div>
flex direction by default is by row. justify-content will center items on the horizontal axis and align-items will align items vertically. You can change the direction to column and then these flip.
#container{
display:
flex;
justify-content:space-evenly;
align-items:center;}
<div id='container'>
<img src='https://via.placeholder.com/350'>
<p>some text</p>
</div>
#container {
display: flex;
place-items: center;
}
p {
margin-left: auto; // Just an example
}
<div id="container">
<img src="https://via.placeholder.com/350">
<p>TEXT...</p>
</div>
About place-items: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Keep the middle item centered when side items have different widths
(12 answers)
Closed 4 years ago.
What I want as a result:
I have three elements in a container that is a display: flex I want the left item to be aligned to the left, and the right item to the right. With the center item aligned in the center.
space-between is not the fix. It is not the solution I am looking for. This is because the elements are differing widths. Even with differing widths, I still want the middle element to be centered.
This could be fixed with a wrapper. and then put a flex: 1 on the wrappers, then within those wrappers, have the elements themselves. Again, this is not the fix I am looking for. I cannot use wrappers in my situation.
.parentContainer {
display: flex;
justify-content: center;
align-items: center;
}
.parentContainer > *{
background: red;
text-align: center;
}
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
The primary way to achieve this layout – because it's clean and valid – is with flex: 1 on the items. That method is explained in the following post, but is also ruled out in this question.
Keep the middle item centered when side items have different widths
An alternative method involves CSS absolute positioning:
.parentContainer {
display: flex;
justify-content: space-between;
position: relative;
}
.middle {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* non-essential decorative styles */
.parentContainer > * { background: orange; text-align: center; padding: 5px; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
P > span:first-child { font-size: 1.5em; }
<div class="parentContainer">
<div class="left">small</div>
<div class="middle">medium element here</div>
<div class="right">longer element is here too</div>
</div>
<p>
<span>↑</span><br>
<span>true center</span>
</p>
This method is explained in the following posts:
Methods for Aligning Flex Items along the Main Axis (see Box #71)
Element will not stay centered, especially when re-sizing screen
I think you can use a different approach. This is my suggestion.
.parentContainer {
display: table;
width: 100%;
background: lightblue;
border-collapse: collapse;
}
.parentContainer > div {
display: table-cell;
width: 33%;
}
.parentContainer > div:nth-child(1) {
text-align: left;
}
.parentContainer > div:nth-child(2) {
text-align: center;
}
.parentContainer > div:nth-child(3) {
text-align: right;
}
<div class="parentContainer">
<div>small</div>
<div>medium element here</div>
<div>longer element is here too</div>
</div>