align items center with respect to my central element

Describing my issue might be a bit complex, but I'll give it a shot. I'm working on a website and have 3 div elements in the header for my navigation bar (burger menu / logo / social networks). I've used flex display with justify-content: between. The problem is that I want to center my second div based on the viewport size, rather than being influenced by the other two divs. Does anyone know how to achieve this?

(Apologies for any language errors in my English)

<header>
        <div class="burger">
            <img src="assets/img/cutlery.svg" alt="Burger Menu Icon">
        </div>
        <div class="logo">
            <img src="assets/img/bio.svg" alt="">
        </div>
        <div class="network">
            <a href="#">
                <img src="assets/img/facebook.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/linkedin.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/instagram.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/france.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/english.svg" alt="">
            </a>
        </div>
    </header>
htmlcss

Answer №1

One way to enhance the style of your second div is by adding:

  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;

This will help align the content within the div. Take a look at this example: 

header{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.logo{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
}
<header>
    <div class="burger">
        Burger
    </div>
    <div class="logo">
        Logo
    </div>
    <div class="network">
        <a href="#">
            Fb
        </a>
        <a href="#">
            Ln
        </a>
        <a href="#">
            I
        </a>
        <a href="#">
            Fr
        </a>
        <a href="#">
            En
        </a>
    </div>
</header>

Answer №2

After conducting a test on the code provided below, it has been successfully verified. This serves as an example; CSS attributes should ideally be located in a separate file:

<div style="display:flex;flex-direction:row;width:100%">
    <div style="flex:1 1 0px">
        <span style="float:right;background-color:lime">Left Element</span>
    </div>
    <div style="background-color:blue">Central element</div>
    <div style="flex:1 1 0px">
        <span style="background-color:red">Right 1</span>
        <span style="background-color:gray">Right 2</span>
        <span style="background-color:magenta">Right 3</span>
    </div>
</div>

Answer №3

You could also opt for something like this.

header{
  display: flex;
 width: 100%;
 justify-content: space-between;
}
.right-menu{
display: flex;
flex: 0 0 55%;
  justify-content: space-between;
}
.right-menu ul{
list-style:none;
margin:0;
}
.right-menu ul li{
display:inline-block;
}
<header>
    <div class="burger">
        Burger
    </div>
    
    <div class="right-menu">
    <div class="logo">
        Logo
    </div>
    <ul>
    <li>
      <a href="#">
            Fb
        </a>
       </li>
    <li>
        <a href="#">
            Ln
        </a>
       </li>
    <li>
        <a href="#">
            I
        </a>
       </li>
    <li>
        <a href="#">
            Fr
        </a>
       </li>
    <li>
        <a href="#">
            En
        </a>
       </li>
    </ul>
      
    </div>
</header>

Answer №4

Apply a flex: 1 style to all child elements within the flexbox to ensure they have the same width. Additionally, center align your .logo div using text-align: center.

header {
  display: flex;
  width: 960px;
  background: lightblue;
}

header>* {
  flex: 1;
}

header .logo {
  text-align: center;
}

header .network {
  text-align: right;
}
<header>
  <div class="burger">
    <img src="http://placekitten.com/40/40" alt="icon knife spoon burger menu">
  </div>
  <div class="logo">
    <img src="http://placekitten.com/200/100" alt="">
  </div>
  <div class="network">
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
  </div>
</header>

Answer №5

This response will definitely come in handy.

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
}

header > div {
  display: inline-flex;
  flex-basis: 33.33%;
  align-items: center;
}

.burger {
  justify-content: flex-start;
  background-color: #AAAAAA;
}

.logo {
  justify-content: center;
  background-color: #DDDDDD;
}

.network {
  justify-content: flex-end;
  background-color: #AAAAAA;
}
<header>
    <div class="burger">
        <span>01</span>
        <img src="assets/img/cutlery.svg" alt="">
    </div>
    <div class="logo">
        <span>02</span>
        <img src="assets/img/bio.svg" alt="">
    </div>
    <div class="network">
        <a href="#">
            <span>03</span>
            <img src="assets/img/facebook.svg" alt="">
        </a>
        <a href="#">
            <span>04</span>
            <img src="assets/img/linkedin.svg" alt="">
        </a>
        <a href="#">
            <span>05</span>
            <img src="assets/img/instagram.svg" alt="">
        </a>
        <a href="#">
            <span>06</span>
            <img src="assets/img/france.svg" alt="">
        </a>
        <a href="#">
            <span>07</span>
            <img src="assets/img/english.svg" alt="">
        </a>
    </div>
</header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

merging the central pair of columns in the bottom row

I am having trouble combining the middle two columns in the third row of my table code. The columns remain separate and do not merge as intended. Can anyone help me identify what is causing this issue in my code? table { border: 1px solid #999; } td ...

htmlhtml-table

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

javascriptphpjqueryhtmlcss

The flask application encounters a 404 error when trying to access the favicon.ico file

Upon reviewing my logfile, I noticed numerous entries indicating attempts to load files like /favicon.ico GET - /favicon.ico GET - /apple-touch-icon.png GET - /apple-touch-icon-precomposed.png I have researched this issue extensively online, but have bee ...

htmlbrowserflask

highcharts-ng expands in flexbox without contracting

I've encountered an issue while trying to incorporate a highchart within a flexbox container. The chart expands along with the container without any problems, but it fails to contract when the container size decreases. My current setup involves angul ...

cssangularjshighchartsflexboxhighcharts-ng

Can a div section be defined and then filled with data in the same document?

Is it possible to initially declare a div section and later populate it with content in the same document? The following dummy code snippet illustrates the query... <div name="xyz" style="..."> <!-- Empty --> </div> < ... INTO "x ...

phphtml

Exploring Ancestors with Jquery to Find Input Fields

In my current project, I am working on a function that needs to extract the values from two input fields within a specific div element. These values will then be added to an array and posted as JSON data. However, I am facing difficulties in navigating thr ...

javascriptjavajqueryhtml

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

javascripthtmlcsscss-animations

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

javascripthtmld3.js

Using a combination of AND and OR in XPATH

Recently, I encountered the following HTML code: <div><h6>abc/h6><p>date</p></div> Using Selenium, I managed to locate this element based on text. However, the issue arises when <h6> can contain various words like "d ...

htmlseleniumselenium-webdriverxpathselenium-chromedriver

Issue with Flex display not being applied within Material UI Grid Item

I am attempting to position an element at the end of a Grid Item (horizontally). In order to achieve this, I am enclosing my component in the following div: Here is the complete code snippet: <Grid container spacing={8} alignItems={'stretch' ...

htmlcssreactjsflexboxmaterial-ui

Guide on implementing two submission options in an HTML form using JavaScript

Currently, I am working on a form that includes two buttons for saving inputted data to different locations. However, I am facing an issue with the functionality of the form when it comes to submitting the data. Since only one submit function can be activa ...

javascripthtmlformsfirebasesubmit

Tips to store Google fonts in the assets directory

I've included this link in my styles.scss @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); While it works locally, the API fails on production or is blocked. How can I host it within my p ...

javascriptcssangulartypescriptsass

Having trouble submitting a date input form generated with vuejs on Safari browser

I am a huge fan of Vuejs and it's my go-to at work. The other day, I came across a rather perplexing scenario. If you have any insights into this, please do share. Here is the code in question: <script setup lang="ts"> import { ref ...

javascripthtmlvue.jssafari

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

javascripthtmlreactjsreact-hooks

Navigating through tabs in a Meteor application: How to maintain the active tab when using the back button

I am working on a multi-page meteor application where each page includes a navigation template. To switch between pages, I am using iron-router. The user's current page is indicated by setting the appropriate navigation link's class to 'ac ...

javascriptcssmeteoriron-router

Ways to identify if the requested image is error-free (403 Forbidden)

One of my scripts loads an image from a specific source every 300 ms, but sometimes it receives a 403 Forbidden response. When this happens, the image element ends up blank. I want to find a way to verify if the image has received a valid 200 response befo ...

javascripthtml

Reset input fields while retaining placeholder text

Seeking advice on how to use this handy jQuery tool properly: $('.myDiv input').each(function () { $(this).val(""); }); Though it clears my form, I'm struggling to maintain the placeholders of the inputs. Any suggestions? C ...

javascriptjqueryhtmlplaceholder

Error: Property 'html' is undefined - AJAX response must be displayed only in a specific div

I encountered an issue: Uncaught TypeError: Cannot read property 'html' of undefined I am working on implementing a voting system for each video on my webpage from a database. I have successfully integrated it using AJAX, but the problem is ...

javascriptphpjqueryhtmlajax

The ng-view directive within AngularJS appears to be malfunctioning

I am facing an issue with my simple Angular app. I have two links that are supposed to change the URL and display the correct view within the same single page application. However, when I include the controllers' module in the main module, it stops wo ...

javascripthtmlangularjs

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend