Right Align Logo Above Text Using Flex

flexbox
flex align right
flexbox vertical-align
flex justify-content
flex align left and right
flex; align bottom right
flex; align-items
flex-direction: column align center

I am trying to Align 1 of 2 Items above the other while using flex. I have a .section which displays:flex - .main-body which defines the width of the container and then .logo & .content within that. I am not sure where I am messing it up but I am trying to right align .logo over .content (or the smiley in my example below). By using display:flex in .section, I was able to center a container (.main-body) and keep all items within that container set to a specific width- however, when I try to align .logo to the right by using justify-content or any other flex property, there are no changes to the logo's position.

I have found a make shift solution in using "margin-left: XXXpx;" on .logo but that pushes the div container .logo over so that I then get a horizontal scroll.

EDIT: Sorry I think I wasn't very clear (its getting late!). The code snippet below in full screen shows the goal and what I am looking to do without having to use .logo {margin-left: 500px;} to achieve the result. Without the margin-left property, the face is left aligned above the text. Basically I am wondering how I can set this up so it is right aligned above the text utilizing flex.

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx0S56P8lrzrjb-7aJX3QG_feOPux89cnLLXF_UJ49tHAys99ccw') no-repeat;
    height: 205px;
    width: 240px;
    display: flex;
    justify-content: right;
    align-self: flex-end;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>

Try this:

<!DOCTYPE html>
<head>    
<style>
* {
  margin: 0;
  padding: 0;
}

.container { 
    background: white fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    width: 100%;
    height: 100vh;
}

.section {
    height: 100vh;
    width:100%;
    display: flex;           
    justify-content: center; 
    align-items: center;   
}

.main-body {
    width: 736px;
}

.logo {
    background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWvNoFhT3HnWkUhpowyn5Zdu1mwGXA1JpNHqyQenW7upqnfIic') no-repeat;
    height: 229px;
    width:229px;
    float: right;
}

.content {
  font-size: 45px;
  margin-bottom: 20px;
  clear: right;
}

.lorem {
  font-size: 18px;
}  
</style>
</head>

<body>
    <div class="container">
            <div class="section">
                <div class="main-body">
                    <div class="logo"></div>
                    <div class="content">
                        <h1>Right Align Smiley</h1>
                    </div>
                    <div class="lorem">
                        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."</p>                    
                    </div>
            </div>           
    </div>       
</body>
</html>

Align icon and text in one line with proper alignment, How do I align text and icon on same line? If we change our flex-direction to column, align-items and align-self will align the items to the left and right. You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.

Adding a screenshot of your goal layout would be great BUT.

Try position absolute, on the logo.

.logo{
  position: absolute; / Could change to fixed if wanted.
  top: 0; // change to get right pos
  right: 0; // change to get right pos
}

Mastering CSS Layout with Flexbox, In this article, we take a look at the alignment properties in Flexbox while If you have a flex-direction of row and are in a left to right language such as This ensures that the baselines of text line up, as opposed to aligning the left of the item, which means the item gets pushed all the way over to the right. Use these properties to align text within the parent or wrapper div. This is nothing that exciting. Horizontally Aligning Elements Using text-align. You can use the text-align property to align child elements. A good example is to center a navigation bar or menu. This is can be frustrating because each menu item's width varies based on the text.

I had a similar problem recently and the best solution for me was using css grid. It allows you to divide your page in several pieces and every element you create can be placed in whatever piece of your page you want. I had tried the margin solution but you will realise that if you try to put another element in the center of the same line your right element will move. Also if you add a link in the logo it might not work as you want. In my case, while clicking the image was leading to the page that was shown in the logo, i could click in many areas in the margin (left of the image) and still go to the logo's page. Take a look at css grids here: https://css-tricks.com/snippets/css/complete-guide-grid/

How to vertically align text inside a flexbox?, Absolutely Centering HTML DIVs and Text Using CSS Unfortunately there is no float: center option, only left and right. Now you have more control over HTML element alignment, including perfectly centering everything. baseline − The flex items were aligned such that the baseline of their text align along a horizontal line. flex-start. On passing this value to the property align-items, the flex items were aligned vertically at the top of the container. The following example demonstrates the result of passing the value flex-start to the align-items property.

Align Logo at center of Header, In recent implementations of CSS you can also use features from level 3, which allows CSS has the property 'text-align' for that: Or, phrased differently: we want the left and right margin to be equal. div.container6 { height: 10em; display: flex; align-items: center; justify-content: center } div.container6 p { margin: 0 }. Horizontally aligns the flex items when the items do not use all available space on the main-axis: align-items: Vertically aligns the flex items when the items do not use all available space on the cross-axis: flex-wrap: Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line: align-content

Everything You Need To Know About Alignment In Flexbox , The following is a very simple guide on centering elements using Flexbox. border-right: 1px solid #F9F2D6; } .box p { max-width: 125px; text-align: center;  Without this, the flex child containing the other text elements won’t narrow past the “implied width” of those text elements. When I first ran into this problem, I found the solution via a Pen by AJ Foster. He writes: According to a draft spec, the above text should not fully collapse when the flex container is resized down. Because

CSS Flexbox Center Anything Vertically & Horizontally (Tutorial), Learn how to center align a logo in the masthead with links on the right and left using CSS Duration: 15:51 Posted: Jul 2, 2018 In my example below, I have a flex and a grid container, and am using align-items and align-self in Flexbox to move the items up and down against each other on the cross axis. If you use Firefox, and inspect the element using the Firefox Flexbox Inspector, you can see the size of the flex container and how the items are being moved vertically

Comments
  • I think you should check this ... two-divs-side-by-side-fluid-display
  • Hey, thanks for the reply. I dont think I was clear on what I was looking to do. Basically the result I am going for is shown in the original code I posted above, only to achieve it- margin-left: 500px had to be used in .logo. This creates a horizontal overflow and I was wondering if its possible to achieve the same positioning for .logo using flex rather than relying on margin-left. So basically right-align the smiley face relative to the text below it.
  • @GideonB I edited the code answer. I could get the result using flex so I used float instead. The reason you were getting a horizontal overflow is because the width of your logo exceeded the the width of the main-body when you used margin-left(Try putting a border around logo and main-body to see this)
  • thanks again for your help! Although your solution worked, it was when you mentioned width that got me looking. I realized by adding display: flex to both .main-body and .logo, I could get the desired result utilizing flex. I believe the issue was with having width set to 100% originally. Once I changed the value to that of to px to reflect the image size I was able to justify-content: right and align-self: flex-end to get the desired result! I have updated my original code above to reflect the fix. Thank you again for your help! I will mark this as solved.
  • hey there! thanks for the respone, the code snippet posted above in my original post in full screen shows my desired outcome. Only to achieve it I had to use .logo {...margin-left: 500px} - I was wondering if I could achieve the same result only using flex instead, when using margin left I get a horizontal overflow.
  • Hey thanks for source! Much appreciated. I am familiar with grid but that seems like a wonderfully in depth write up that I will have to go through.