A guide on aligning text at the center of a List with an included image

I'm new to CSS and struggling to figure out how to vertically center text within an unordered list that also contains an image.

I would like to add a logo to my navigation ul and have the text centered, but it is currently sticking to the bottom of the ul.

Here's the code I'm working with and the desired outcome: Fiddle

Check out this image for reference

HTML:

<body>
    <header>
        <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
        </nav>
    </header>
</body>

body {
    background-color: #294F6D;
    margin: 0;
}

#navbar ul {
    margin: 0;
    list-style: none;
    background-color:  #303E73;
    text-align: center;

}

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px
}

.logo {
    width: 100px;
}
htmlcss

Answer №1

To center your elements vertically, simply add vertical-align: middle; to your CSS.

For example:

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px;
    vertical-align: middle;
}

Check out this working snippet:

body {

    background-color: #294F6D;
    margin: 0;
}

#navbar ul {
    margin: 0;
    list-style: none;
    background-color:  #303E73;
    text-align: center;

}

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px;
    vertical-align: middle;
}

.logo {
    width: 100px;
}
<header>
    <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
    </nav>
</header>

Answer №2

Embrace the power of <span style="font-weight:bold; color:#008000;">display: flex</span>
for styling your layout:

body {
  background-color: #294F6D;
  margin: 0;
}

#navbar ul {
  align-items: center;
  display: flex;
  margin: 0;
  list-style: none;
  background-color:  #303E73;
  text-align: center;

}

#navbar li {
  background-color: #A13647;
  padding: 20px 50px
}

a {
  text-decoration: none;
  color:white;
}

a:hover {
  text-decoration: underline;
}

.logo {
  width: 100px;
}
<header>
    <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
    </nav>
</header>

Explore Flexbox compatibility on caniuse, as it may have issues with older versions of Internet Explorer. However, this example should work smoothly.

Answer №3

body {
    background-color: #294F6D;
    margin: 0;
}

#navbar ul {
    margin: 0;
    list-style: none;
    background-color: #303E73;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#navbar li {
    display: inline-block;
    background-color: #A13647;
    padding: 20px 50px;
}
#navbar li a {
  text-decoration: none;
  color: #000000;
}
.logo {
    width: 100px;
}
<body>
    <header>
        <nav id="navbar">
            <ul>
                <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
                <li><b><a href="more.html">MORE</a></b></li>
                <li><b><a href="services.html">SERVICES</a></b></li>
                <li><b><a href="blog.html">BLOG</a></b></li>
                <li><b><a href="shop.html">SHOP</a></b></li>
            </ul>
        </nav>
    </header>
</body>

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

Scroll horizontally within each row

I am attempting to create a table with individual horizontal scrolling for each row, dynamically. Currently, my code only allows the entire table to scroll horizontally, not the individual rows. https://i.sstatic.net/3oaPl.jpg <table class="table-mai ...

phphtmlcss

What is the best way to ensure that text stays aligned perfectly next to an

There seems to be a problem with my CSS. The text in the <li> tag is appearing below the line of the icon. How can I resolve this issue? I want the text to be vertically centered on the line. This seems to happen when I use the ::before selector with ...

htmlcss

Dragging a React <div> using useRef

As a beginner in React, I decided to challenge myself by recreating a classic game like 'space invader'. It seemed like a fun and simple project for someone at my skill level. My goal is to have a spaceship at the bottom of the screen that can s ...

cssreactjsuse-ref

Arrange a trio of cards in a row with dynamic alignment

I'm having trouble aligning the cards next to each other. I've written the code below but for some reason, they're not displaying next to each other. What I'm trying to do is call a REST API and get back a list of data. I want to loop ...

jqueryhtmlcssrestbootstrap-4

Correcting the reference to "/" (root) for assets after relocating the site to a subdirectory

I currently have a website located in the public_html directory, where all assets (images, css, js, etc) are referenced using /asset_folder/asset. The "/" at the beginning ensures that the browser starts from the root and navigates through the directories. ...

javascriptphphtml.htaccessweb

What is the best way to align three tables columns in a single row?

I am facing an issue with aligning the columns of three different tables in one line. I have tried applying CSS styling, but the columns still appear misaligned. How can I ensure that the columns are properly arranged in a single line? Below are my HTML/C ...

htmlcsshtml-table

Is there a way for me to replicate the reloading problem that occurs when a button is clicked within an HTML

Recently, I encountered a problem with our company's Web product where pressing a certain button resulted in the entire page being reloaded. This issue reminded me of a similar situation described on this website. Following the solution provided there ...

javascripthtml

I am attempting to showcase a retrieved value in HTML through an AJAX request, with the help of Flask

Hello everyone, I'm fairly new to web development and currently working on a flask application. My goal right now is to test an AJAX function to ensure it's functioning correctly. This function reads radio inputs from HTML, and my aim is to displ ...

pythonjqueryhtmlajaxflask

rotate a game embedded in a website by 90 degrees

Need assistance in rotating this embed code by 90 degrees. Can you provide some guidance? <div class="miniclip-game-embed" data-game-name="8-ball-pool-multiplayer" data-theme="0" data-width="750" data-height="520" data-language="en"><a href="http ...

htmlrotation

Ensuring your image matches the size of the containing div element

I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly a ...

cssbootstrap-4

What is the best way to resize images to fit in a 200 pixel square box using CSS?

I have a collection of images that all fit within a 400px × 400px box, with one dimension being 400px and the other smaller. I want to resize these images using CSS or jQuery/JavaScript if necessary, to fit into a 200px by 200px box. The goal is to have t ...

javascriptcssimagebounding-box

What is the best way to define coordinates or set margins for the autoTable component in jsPdf when using React js?

While working with the jsPdf library to create a PDF in React, I am encountering an issue where I am unable to set margins for the autoTable when there are multiple tables on a single page. Below is the code snippet: import React from "react"; ...

javascriptcssreactjsjspdfjspdf-autotable

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

cssbootstrap-4

Adjusting the size of the post title's font

Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...

cssfrontendjekyllscss-lint

Implementing a JQuery script that triggers every time there is a change in the scroll

This script creates a shrinking effect on a box followed by a fade-in/out transition when the scroll position changes. However, the issue is that it triggers every time there is a scroll position change. For example, if the scroll position is at 100px and ...

jqueryhtmlcss

The amazingly efficient Chrome quick find feature, accessible by pressing the powerful combination of Ctrl + F, ingeniously

Currently using Google Chrome version 29.0.1547.62 m. I've employed the CSS attribute overflow set to hidden on the parent element, which renders some of my DIV elements hidden from view. Additionally, these concealed DIV elements are adjusted in pos ...

javascripthtmlcssgoogle-chrome

How to center an HTML header

Currently working on a one-page scrollable website, aiming to have the first page consist of a navbar, image, and header. The challenge I'm facing is centered around aligning the header vertically. Although I managed to center it horizontally, the ver ...

htmlcssbootstrap-4

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

How can I retrieve the panel numbers of jQuery UI tabs and adjust their visibility using CSS? I am looking to identify the panel numbers of each tab and control the visibility of certain tabs. <div id="tabs"> <ul> <li><a href="#"> ...

javascriptjquerycssjquery-uijquery-1.10

Ensure that the responsive SVG image remains centered even when resizing

I have been attempting to center crop the responsive SVG image while resizing. Even though I used preserveAspectRatio="xMidYMax slice", the image width does not stay consistent with my screen size. body{ margin:0;padding:0; } .wrapper { position: re ...

csshtmlsvgresponsiveness

Utilize JQuery to transfer a cell that currently resides in one row to a new row

I need to relocate a cell within a table from one row to another. The table currently has only one row with four cells, and I specifically want to move the third cell to a new row. Here is the existing markup: <table class="sbtable"> <tbody> ...

jqueryhtml