Flex item alignment and paragraphs within flex item

810311 · December 18, 2018, 3:56am

Note: this thread is related to Header layout

Hi guys,

I am trying to horizontally center img on about.html page so it is center aligned with h1 in the header . I am wondering if this is possible without adding padding to .about div which wraps the image.
There’s slight shifting to the right of h1 in the header compared to other pages. Could it be vertical scrollbar on the right on index.html and view.html that causing it…and about.html doesn’t have it ?

I put my text within p tags and wrapped them in div class="text". My understanding is in this scenario div class="text" is the flex item because main { is flex container. What would be considered p tags with text ? I went to flexbox spec and they are referring to text runs or text nodes…
Just wondering how text behaves within flexbox…

Please see updated test link http://buildandtest.atspace.cc/about.html

Ray.H · December 18, 2018, 5:08am

Hi,
The first thing you need to do is remove the height from your main content div.
It’s causing problems for the footer.

.about {
    /*height: 35vh; remove this*/
    justify-content: space-between;
    align-items: center;
    padding: 0 7px;
    outline: 1px solid maroon;
}

The header and main are separate elements so you won’t be able to get any built in alignment properties from flexbox to line up the first child element of the header and main.

Here is a screenshot with your outlines reinstated and it shows the width of your h1 at 288.67px
(I temporarily disabled the 30em max-width on the main divs so that’s why your text is wider)

You could set a max-width close to the h1’s width on your image div, go ahead and give it a class so you can keep your styles separate from the text. I named it .imgwrap below in the code.

You would want to set that max-width in ems (18em is close for me) so it can scale with a font size change on the h1 ( by user zooming).

Now that will enlarge your image but you can reduce your image size and then align it in the center of the image div (text-align:center)

  <main class="about">
    <div class="imgwrap"><img src="images/me.jpg" alt="" width="225" height="225"></div>

.imgwrap {
    flex: 0 0 auto;
    max-width: 18em; /*adjust as needed*/
    text-align:center;
}
.imgwrap img {
   width: 80%; /*or whatever suits you*/
   height:auto;
}

Yes that’s what it is, it’s normal behavior so it’s best not to worry about it.
The way to fix it though is to keep the scrollbar position in place at all times with this…

html {
    overflow-y: scroll;
}

But that comes at the cost of an empty scrollbar column on shorter pages.

Ray.H · December 18, 2018, 5:30am

That’s right, div class="text" is the flex item

From that point forward all child elements will be back to their normal specs. Your p tags will behave just like they would in a normal div. Now if you had of set display:flex on the div class="text" then the p tags would become flex items as well.

810311 · December 19, 2018, 4:49am

Thanks for your suggestion Ray.

With regards to img size I would prefer to keep it at its original size (100%) if possible since the image itself is small (250 x 250). For now I gave it width: 95%;

For some reason I am not able to increase max-width on img container .imgwrap and it appears text-align: center; has no effect either…

I’ve updated the test link. Please see post# 1.

Ray.H · December 19, 2018, 5:49am

I think the reason you can’t increase max-width is because of the flex:0 0 auto;
The text-align not working is because the image is set to display:block; , that’s okay leave it as block, we can center it another way.

You have this rule conflicting with your new classes too.

main > div {
    flex-basis: 50%;
    padding: 0 7px 14px;
}

That padding is interfering with positioning, I see you reset it on .text . Go ahead and remove it from .imgwrap too.

Try these changes and see if your able to fine tune it to your liking.

.imgwrap {
    /*flex: 0 0 auto;*/
    display: flex;
    width: 18em;
    justify-content: center;
    align-items: center;
    outline: 1px solid red;
    padding: 0;
}

.imgwrap img {
    display: block;
    width: 100%;
    max-width: 225px;
    height: auto;
    outline: 1px solid blue;
}
.text {
    max-width: 30em;
    flex: 0 0 auto;
    padding: 0;
    outline: 1px solid blue;
}

810311 · December 20, 2018, 4:50am

I updated css with your changes. Please see updated test link. The .imgwrap expands more than shown on your screenshot - not sure why. I guess I am missing something. But when I tried changing width: 18em; to max-width: 18em on .imgwrap it seems to work…
Also image itself lost in quality…

Ray.H · December 20, 2018, 5:34am

I had flex-basis: 50%; disabled when I was making the live edits.
It was reset to flex:0 0 auto; on your .text div, just do the same to .imgwrap

.imgwrap {
    display: flex;
    flex: 0 0 auto; /*add this*/
    width: 18em;
    justify-content: center;
    align-items: center;
    padding: 0;
    outline: 1px solid red;   
}

Ray.H · December 20, 2018, 6:00am

When you built your first page the main > div selector was what you needed there. As you’ve progressed you see how it can cause problems for other pages.

Rather than having to reset the styles for other pages (like we’ve done here) it would be best to set up a class that uses flex-basis: 50%;. Then you won’t be removing styles on new classes.

Something like…

.flex50 {
    flex-basis: 50%;
    padding: 0 7px 14px;
}

I think I had mentioned in your other thread something about setting up page specific styles too. That can be done by setting a class on the body element. Here is an example in the zip file below.

page-specific.zip (3.2 KB)

As you click through the pages view the page source and you will find a class on the body element. Then look at the CSS to see how it corresponds to each page.

810311 · December 21, 2018, 5:08am

I looked through your example page - its done via combining class on the body + id selector (.home #header) via this construct header is targeted and given a different color on each page.

I am not sure if we need to use this solution in my case. Since I only need this rule .home > div { flex-basis: 50%; padding: 0 7px 14px;} on one page - index.html - isn’t it easier to do it like this…?

<main class="home">

.home > div {
flex-basis: 50%;
padding: 0 7px 14px;

}

/* main > div {
  flex-basis: 50%;  
  padding: 0 7px 14px; 
} */

I’ve added flex:0 0 auto; to .imgwrap as well…yeah looks like flex-basis auto recognizes the width and allows to change it…thanks Ray. I should have caught it myself…not that complex…

do you know why would that be happening ?

Ray.H · December 21, 2018, 5:30am

Yes you got the right idea. Since <main class="home"> is only found on your homepage then .home > div rules only effect divs on that page. You’ve just set up a class on your main element.

You don’t have to descend down from the body element, it was just an example. Now when you have multiple elements changing from page to page then that’s when a class on the body can help.

You should be able to remove the resets that were needed on .imgwrap and .text now that your using .home > div

Ray.H · December 21, 2018, 5:33am

I’m not sure, I don’t think it has to do with the CSS.
Have you made any edits to your image? Sometimes quality can get lost in edits.

810311 · December 22, 2018, 12:43am

I think I am gonna leave it as is for now. Focusing on layout more important…

I am playing with image and text in terms of finding a better position on the page. I am also thinking to increase space between bottom of the image and text. Not sure yet. But say would margins with rem units do the trick…? Something like this…

.about {
    margin-top: 5rem;

.imgwrap {
    margin: 2rem 0;

system · March 23, 2019, 7:43am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.