CSS for aligning div logo in the center

I am currently working on optimizing the mobile version of our website and have encountered a roadblock while trying to center the logo in the header section. I have attempted using the flex property along with justify-content:center;. Here is the snippet of code in question:

<header>
        <div class="container center-me">
            <div class="responsive-logo"></div>
            <div class="row">
                <div class="align-items-center justify-content-center">
                    <nav>
                        <div class="logo-holder"></div>
                        <ul class="clearfix">
                            <li><a href="{% url 'index' %}">Home</a></li>
                            <li class="dot">.</li>
                            <li><a href="{{ Anthony.go_to_product_page }}" class="r_spacer">Anthony</a></li>
                            <li><a href="{{ Jackson.go_to_product_page }}">Jackson</a></li>
                            <li class="dot">.</li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="hero"></div>
 </header>

Your CSS styles might be contributing to the confusion as well. The height of the header element seems to be causing issues, and adjusting or removing certain elements affects the layout. Additionally, the challenge of centering the logo within its containing div persists... I would appreciate any guidance or corrections you can provide. As a beginner, this process has been quite challenging for me. Thank you for your assistance!

htmlcssflexbox

Answer №1

Remove the declaration position: absolute; left: 10px; from the CSS rule for .responsive-logo! The parent's flex properties will handle the logo container's centering.

Answer №2

Minimize the amount of code used by incorporating the following snippet:

.logo-wrapper{ align-items: center;justify-content:center;display:flex;}

Answer №3

Simply include display: flex; and justify-content: center; in your <nav> tag

Check out this link on JSFiddle

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}

.pullcontainer a#pull {
display: none;
}

nav ul li a {
color: #282f35;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}

nav ul li a:hover {
color: #838383;
text-decoration: none;
}

p {
text-align: center;
font-size: 14px;
color: #848789;
font-weight: 300;
word-spacing: 2px;
line-height: 1.8em;
margin-top: 25px;
}

p.text-intro {
font-size: 18px;
}

nav {
height: 75px;
margin-top: 30px;
position: relative;
display: flex;
justify-content: center;
}

.logo-holder {
background: url(../img/main-logo.png) no-repeat center center;
width: 114px;
height: 105px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-90px);
}

.logo-holder>img {
width: 100%;

.responsive-logo {
display: hidden;
}

header {
background-color: #f4f5fc;
font-family: 'Lato', sans-serif;
}

... (remaining code unchanged)


<header>
        <div class="container center-me">
            <div class="responsive-logo"></div>
            <div class="row">
                <div class="align-items-center justify-content-center">
                    <nav>
                        <div class="logo-holder">
                          <img src="https://via.placeholder.com/150x50" alt="">
                        </div>
                        <ul class="clearfix">
                            <li><a href="{% url 'index' %}">Home</a></li>
                            <li class="dot">.</li>
                            <li><a href="{{ Anthony.go_to_product_page }}" class="r_spacer">Anthony</a></li>
                            <li><a href="{{ Jackson.go_to_product_page }}">Jackson</a></li>
                            <li class="dot">.</li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="hero"></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

How to load an iframe only upon clicking on a link

I am struggling to make the iframe popup appear only when a specific class link is clicked. Here is my HTML and JS code: Unfortunately, nothing happens when I click the link with the class 'aclass'. I have updated my JavaScript, but the issue ...

javascripthtml

Scrollbar is always visible on Angular Flex Layout

As someone who is just starting to work with Angular and flex layout, I have a simple page setup consisting of a header with a side navbar and router outlet. I encountered an issue where my page always displays a scrollbar. If I remove fxFlexFill, the sc ...

cssangularflexboxangular-flex-layout

Organizing Data Tables Based on Selected Rows

I am working with a datatable that includes a table with checkboxes in the first column. I am trying to figure out how to sort the table so that when a checkbox is checked, the corresponding row will move to the top of the table. <table class="table ...

jqueryhtmlcheckboxdatatables

CommentsController#new encountered a NoMethodError due to an undefined method called 'text' for the Comment with the following attributes: id: nil, author: nil, created_at: nil, updated_at: nil

I'm currently integrating rails with react to include a comments section in the app I am developing. While the /comments page is functional, I encountered an error when attempting to create a new comment. Despite consulting the guide I am following, t ...

htmlruby-on-railsruby-on-rails-4reactjserb

Calculating the sum of all elements in an array

Hi, I am currently attempting to retrieve the total value from an array (such as Arr[1] + Arr[2], and so forth). Unfortunately, I am struggling to find a solution. Below is my existing function: this.hourlyTotals = function() { var custsperhour = Math ...

javascripthtmlarrays

Struggling to align my image in the center while applying a hover effect using CSS

Hey there, I'm having an issue centering my image when I add instructions for it to tilt on mouseover. If I take out the 'tilt pic' div, the image centers just fine. Can anyone help me identify what I might be doing wrong? Thanks in advance! ...

javascripthtmlcssweb

Creating HTML form input fields for reading and writing an XML file

Currently working on constructing an HTML form containing input fields to read and modify data from an XML file. The initial task involves loading values into the input fields upon page load, but unfortunately, it is not functioning as expected. < ...

javascriptjqueryhtmlxml

Height Difference Caused by Textarea Overflow with Auto Scrollbars

Displayed below is code that generates a textarea with 3 visible rows: <textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea> Unexpectedly, in Firefox (version 20.0.1), the textarea displays 4 rows instead of 3. To view ...

htmlcssfirefoxtextarea

``Are there any thoughts on how to troubleshoot display problems specifically on mobile

Whenever I use Safari on iOS for my web application, I encounter strange rendering issues. It's odd because the majority of the time everything functions as it should, but every now and then these bugs crop up with no discernible pattern. Examples th ...

cssvue.jssafarimobile-safari

PHP-generated HTML onclick attribute malfunctioning

Here is the PHP code I am currently working with: $listing .= "<button onclick='updateValue(".$id.", ".$key.")'>change value</button>"; The variable $id is an integer and functions correctly. However, $key is a reference from a for ...

javascriptphphtml

Using Two JavaScript Functions with Identical Names in One HTML File

I am currently facing an issue with a function where the data is retrieved from the getValue() function. The following code snippet is a fragment. grid.js function gridLoadComplete(){ var data = getValue(); } Take into account the following H ...

javascriptjqueryhtml

Having RoundRect take the top left position of its rectangle container rather than its immediate parent (td)

I am currently troubleshooting an email-related issue that is specifically affecting Outlook In order to create a round Call To Action (CTA) button, I utilized Vector Markup Language (VML) The expected result should look like this: https://i.sstatic.net ...

htmlcssoutlookhtml-emailvml

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

javascripthtmlcssreactjs

Tips for refreshing the default style of Material UI select

I'm having trouble customizing the default background color of the first menuItem in the select component. The class I need is not visible when inspecting the element, as the background color disappears upon inspection. Steps to reproduce: 1. Click ...

javascripthtmlcssreactjsmaterial-ui

What is the process by which photoswipe applies styles to blur an image upon clicking the share button?

If you want to see an example, check out this link: http://codepen.io/dimsemenov/pen/gbadPv By clicking on the Share button, you'll notice that it blurs the image (and everything else). Despite inspecting it closely, I still can't seem to figu ...

javascriptcssphotoswipe

Unlocking two features with just a single tap

I am currently working on a website for a kiosk, where the site transitions like a photoslide between each section. To achieve this effect, I have added a layover/mask on the initial page. The layover/mask is removed using a mouse click function. This is ...

javascriptjqueryhtmlcss

What is the proper way to apply a backgroundImage to just one component?

Is there a way to set the backgroundImage on just one component in a React project? When I attach it to the body element, it shows as the backgroundImage for all components. However, if I assign it to the .wrapperContainer element of the current component, ...

reactjscssbackground-image

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

Tips on how to keep radio buttons selected when choosing another radio button option?

Hey there, I am experiencing an issue with two ratings fields on my page. When the first rating is checked and then I check the second one, the first one automatically gets unchecked. While this does not affect the value saved in the back-end, it's ca ...

javascriptjquerycss

Troubleshooting a Selected Menu Problem in jQuery CSS

Hello, I have implemented a jQuery script to change the color of a menu item when it is selected: .selected{ background-color: red; } $("#nav-container>li").click(function(){ $(this).addClass('selected') .siblings() ...

jqueryhtmlcss