Aligning the image at the center within a flex container

I am struggling with aligning an image and a link inside a div using the display: flex property. This is how my code looks:

<div style="display: flex;">
  <div class="site-title-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="/assets/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="763f1519185b454436450e58061811">[email protected]</a>">  <!-- width="34" height="34" -->
    <a class="site-title" rel="author" href="{{ " / " | relative_url }}">{{ site.title | escape }}</a>
  </div>
 //.....
</div>

CSS

   .site-title-container {
        float: left;
        display: flex;
        justify-content: center;
        align-content: center;
    }

I can't figure out why the image is not aligned to the center. Any suggestions?

htmlcssflexboxcentering

Answer №1

Make sure to use justify-content:center on the main div.

.centered-container {
    float:left; 
    display: flex;
    justify-content: center;
    align-items: center;
}
<div style="display: flex; justify-content:center">
  <div class="centered-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="/assets/img/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e775d5150130d0c7e0d46104e5059">[email protected]</a>"> 
    <a class="site-title" rel="author" href="">{{ site.title | escape }}</a>
  </div>
</div>

Answer №2

When the .site-title-container div transforms into a flex-child, it shrinks to fit the width of its content.

To ensure it expands to 100% width, simply add flex:1 to it.

.parent {
  display: flex;
}

.site-title-container {
  background: pink;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="parent">
  <div class="site-title-container">
    <img style="border-radius: 7px; width: 34px; height: 34px;" src="http://www.placebacon.net/400/300">
    <a class="site-title" rel="author" href="Some-Link">Link</a>
  </div>
</div>

Answer №3

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

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

Having trouble transmitting POST values through AJAX requests

I am facing an issue with two separate files, bargraph.html and data.php. Here is the content of bargraph.html: <form method="POST" name="dataform" action=""> <select name="data1" id="data1-value"> <option value="DateRecorded">Dat ...

phphtmlmysqlajaxpost

Surround the image with horizontal links on each side

I am attempting to design a horizontal unordered list with an image positioned in the center of it. I am facing the challenge of not being able to insert the image directly within the unordered list. Is there a way to align the image in the center while ha ...

css-floatcss

Fade effect not working with Bootstrap Modal

I am encountering an issue with the Twitter Bootstrap modal while trying to display post details on WordPress. The problem is that when the modal opens, the entire screen turns grey and nothing in the modal is clickable. I can only exit this mode by pressi ...

javascriptjquerycsswordpresstwitter-bootstrap

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

Is there a way to execute Javascript in Django without revealing static files?

When setting up payments on my Django site using Stripe, I realized that the .js file is visible under Sources in the developer tools when inspecting elements on any browser. This presents a potential security risk as anyone can access this file. How can ...

javascripthtmldjangosecuritystatic

Alter the color of the dropdown background when it is changed

Currently, I am utilizing the Semantic UI React CSS library and find myself in need of changing the background color of dropdowns once an option is selected. to <Dropdown placeholder='Name' selection search options={names} className=&a ...

javascripthtmlcssreactjssemantic-ui-react

Having trouble retrieving information from the weather website

Hello, I am interested in extracting weather information from a specific website: On this website, there is a search bar that allows users to enter the name of any city in India. Upon pressing 'Go', the user is directed to a page displaying the ...

pythonhtmlparsingbeautifulsoupweather

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...

javascriptjqueryhtmlcssembed

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

What is the best way to access dropdown sub-menu options from a complex multi-level navigation bar

Struggling to figure out how to open my dropdown sub-menu using CSS. Hoping to make it so the user can open it by hovering over the corresponding tag. I attempted to use #lablinksDD to trigger the opening of #ddSbMenu when hovered over #menuDD with #labLin ...

javascripthtmlcss

Is there a potential white-space issue with jQuery CSS in Internet Explorer versions 7 and 8

Recently, we encountered an unusual issue with jQuery and CSS while working on compatibility with IE7 and IE8. Our project involves animations and height measurements, and during the animations, we wanted to prevent text from wrapping. To achieve this, we ...

jquerycss

Steps for accessing registration form data once the signup button has been clicked

Hello everyone! I have a code that includes login and registration forms as tabs. When we click on either one, it goes to the respective form. Now, I want to make a change by removing the Register tab and adding it as a signup button next to the login butt ...

htmltwitter-bootstrapforms

The latest version of npm Boostrap (4.1.0) is missing some important CSS properties for the `background` tag

I am currently working on an Angular 5.2.10 project that utilizes angular-cli and bootstrap version: 4.0.0-beta.2 with a specific css class called .en-icon-24: .en-icon-24 { background: url(../../../../assets/img/icons.png) -370px 0px; width: 24 ...

cssangularnpm

Is there a way to modify the rounded corners of a checkbox in material-ui?

After importing material-ui into my react app, I was able to change the color and size of a checkbox as shown. However, I am having trouble changing the icon's border radius. How can I achieve this? import FormGroup from '@mui/materi ...

cssreactjscheckboxmaterial-ui

Decide on the chosen option within the select tag

Is there a way to pre-select an option in a combobox and have the ability to change the selection using TypeScript? I only have two options: "yes" or "no", and I would like to determine which one is selected by default. EDIT : This combobox is for allow ...

htmlangulartypescript

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

javascripthtmlcssangularjs

What is causing the page to not load in my development environment (MAMP PRO) when using header()?

Has anyone experienced the issue where suddenly on MAMP PRO, the page will only load up to the header() function? For example, here is a header call I am using: header('Location: /index_signedIn.php'); exit(); I have tested my other sites and ...

phphtmlheadermamp

Revised: "Redesigned CSS class names taken from a

I created a React component library using mantine with @rollup package. This library comprises custom components styled with styled-components and CSS module (.module.css) files. All the css modules are bundled in javascript and injected into the body htm ...

cssreactjsnext.jsrollup

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

javascriptcsshtml

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

jqueryhtmlcss