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

Create a border that does not inherit the opacity of the object

Check out this jsBin for reference: http://jsbin.com/uyonux/1 The hover state is working fine, but the focus state is not. I want the blue color to remain solid #13A3F7 without inheriting the opacity of .4. Is there a way to achieve this without the elem ...

csscolors

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...

cssreactjsmaterial-uiinline-styles

Crashes within an HTML5 Canvas

Having recently started to explore Javascript and working with canvas elements, I've encountered a roadblock when trying to implement collision detection for the canvas walls. Typically, I have a small square drawn on the canvas that I can move aroun ...

javascripthtmlcanvascollision-detection

Why does the flex-start and flex-end values correspond to the top and bottom positions when using the flex-direction property set

I am attempting to organize text and buttons into a row, with the buttons aligned on the right side and the text on the left side. My approach involves creating a flexbox layout and assigning items the appropriate classes for alignment. html, body { widt ...

htmlcssflexboxalignment

Loading a form on the fly using jQuery

As I delve into the realm of web design, I encountered a perplexing issue that has left me stumped. My goal is to dynamically load a form into a div element using jQuery. Here's a snippet of my code: Inside the main file: $('#left_colum'). ...

phpjqueryhtmlajaxdynamic

Arrange divs in a stack fashion

Currently, I have a table-styled three-column set of divs. I would like these columns to stack vertically on mobile devices. I think this can be achieved using the float method, but the titles and descriptions for each column are in separate rows (divs), ...

htmlcss

What is the best way to incorporate a PHP file into an HTML file?

Below is the code snippet from my index.php: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Voting Page</title> <script type="text/javascript" src="js/jquer ...

javascriptphpjqueryhtml

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

Please tap to dial: Access to navigation is restricted

Trying to add a click-to-call link with the following code: <a href="tel:+4912345678912">Tel: +4912345678912</a> Despite Google developers saying it should work, major mobile browsers are blocking the navigation when clicking on the link. It ...

javascripthtmlbrowsertel

Click on the radio button to delete all selected entries in the option dropdown

After spending the entire day trying to find a solution, I am still struggling with a simple task - how do I clear all selections from a group of select option drop downs at once without removing them? I want the selections to revert back to their default ...

javascriptjqueryhtmljquery-mobile

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: And this is how I want it to appear: Is there a way to achieve the desired layout using Bootstrap's Grid or Flex Layout? Here i ...

javascripthtmlcsslayoutbootstrap-4

Altering the appearance of an input field upon submission

https://jsfiddle.net/3vz45os8/7/ I'm working on a JSFiddle where I am trying to change the background color of input text based on whether the word is typed correctly or incorrectly. Currently, it's not functioning as expected and there are no e ...

javascripthtmlcssonclickjsfiddle

Unable to hear sound on Mozilla Firefox

I am facing an issue with playing an audio file using the audio tag inside the body element. The audio plays perfectly in Chrome once the body has finished loading, but it fails to play in Mozilla Firefox. I even attempted to download the audio file and pl ...

javascripthtmlcss

What is the best way to line up two forms side by side?

Looking to create a login view for a webpage with two forms (one for registration and one for login) aligned side by side. Initially attempted using a table, then tried using bootstrap form groups (rows and cols) without success. Finally, aligned them in t ...

htmlcss

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

Are you curious about the array of elements in React's carousel?

I'm currently in the process of constructing a website using React, and I have a specific challenge related to the "news" section. Within this section, I have a list of three components that represent different news items. These components are housed ...

javascriptcssreactjsnpmreact-router

Experience unique website functionalities across Windows/Android and Apple ecosystems

Apologies for any language errors in advance. I'm facing an issue where my website appears differently on Safari or Chrome on iOS/MacOS compared to Windows 10 or Android devices. If you observe the List of Receiving Countries in the images provided: ...

cssreactjsweb

Prepare the writing area for input

My inputs have validation indicators, such as a green tick or red cross, placed at the very right of the input (inside the input). Is there a way to specify the writing space inside an input without restricting the number of characters that can be enter ...

css

Tips on how to toggle the class of one specific element without affecting others

Whenever I click on a div, it expands. However, if I click on a collapsed one, both collapse and the first one returns to an inactive state. At this point, the last two are in both active and inactive states. And if at this time I click on the first one, t ...

javascriptjqueryclasshtml

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

In the process of creating a database-driven graph, I am utilizing libraries from Codepen. These libraries include: THIS and Highchart.js The HTML file on display simply showcases the chart, while the main data processing is handled in an index.js file t ...

javascriptjqueryjsonhtmlhighcharts