Guidelines for aligning an image beside text using CSS

I am looking to position an image on the left side of some text and have it adjust based on window resolution.

Without the image, this is how it appears: http://prntscr.com/fmky4f

This is the desired appearance after adding the image:

My code snippet:

.xd {
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}
<div class="container">
  <div id="container-fluid">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

I attempted to add the image using the .logo class properties, but did not achieve the desired result.

htmlcss

Answer №1

When utilizing floats and widths for the logo, it's a good idea to apply the same approach to the menu as well.

.xd {
  float: left;
  width: 90%;
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}
<div class="container">
  <div id="container-fluid">
      <img class="logo" src="http://placehold.it/50x50">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

You can also consider using flexbox. Here is an alternative example:

header,
ul {
  display: flex;
}

header img {
  display: block;
  max-width: 100%;
  height: auto;
}

header ul {
  flex-grow: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 20px;
}

header a {
  padding: 5px;
  color: #080808;
}
<header>
  <div>
    <img src="http://placehold.it/50x50">
  </div>
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="about.html">About Us</a>
    </li>
    <li>
      <a href="news.html">News</a>
    </li>
    <li>
      <a href="gallery.html">Gallery</a>
    </li>
    <li>
      <a href="map.html">Map</a>
    </li>
    <li>
      <a href="contact.html">Contact Us</a>
    </li>
  </ul>
</header>

Answer №2

To ensure that the menu items remain centered within the container, you can utilize the CSS property position: absolute;, along with the default image settings displayed below. If necessary, adjust the top and left properties to reposition the image away from the border or corner.

The CSS code snippet provided below demonstrates how to keep the menu items centered relative to the container:

.xd {
  font-size: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.xd li {
  display: inline;
}

.xd a {
  display: inline-block;
  padding: 5px;
  color: #080808;
}

.logo {
  width: 10%;
  height: auto;
  float: left;
}
#image1 {
position: absolute;
}
<div class="container">
<img src="http://placehold.it/80x50/fb4" id="image1">
  <div id="container-fluid">
    <ul class="xd">
      <li>
        <a href="index.html">Home</a>
      </li>
      <li>
        <a href="about.html">About Us</a>
      </li>
      <li>
        <a href="news.html">News</a>
      </li>
      <li>
        <a href="gallery.html">Gallery</a>
      </li>
      <li>
        <a href="map.html">Map</a>
      </li>
      <li>
        <a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>

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 CSS can affect the layout of elements on a webpage

I am looking to achieve something similar to this: The left box should maintain a fixed width, while the right one resizes to fit the full width of the browser window. I also need the height of both boxes to be resizable. Apologies for any inconvenience ...

htmlcss

What is the procedure for retrieving values from a table?

<tbody> <tr> <td><span style="">Price</span></td> <td><span style="">:</span></td> <td><span style="">660</span></td> </tr> <tr> <td><s ...

javascriptjqueryhtmlhtml-table

The onKeyUp event is not functioning as expected in React, unlike the onChange event

For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...

javascripthtmlreactjsonkeyup

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

<Popover key={element.id} className={classes.popoverItem} classes={{ paper: classes.paperElement }} open={isOpen} anchorEl={this.myRef.current} anchorOrigin={{ vertical: 'bottom&apo ...

htmlcssreactjsmaterial-ui

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

htmlcsssvg

Elements in table do not display properly in Internet Explorer

The alignment of the list element is off-center in Internet Explorer, whereas in Chrome it is perfectly centered. Below is a snippet of the code being used with the Bootstrap CSS Framework. Here is the JSfiddle https://jsfiddle.net/8cunpsvy/ ...

cssinternet-explorerbootstrap-4

What is causing the spinner with CSS rotation transform to bounce rhythmically?

In my design, I have created a simple Spinner icon in Figma. It's meant to be perfectly aligned at the center of an enclosing frame that has dimensions of 64x64. To achieve the rotating effect, I applied CSS rotation as shown below: let rotation = ...

cssanimationsvgrotationcss-transforms

What is preventing me from using the JavaScript toggle button multiple times?

I am currently trying to implement a JavaScript toggle button in two different sections on the same page, but I am encountering difficulties. I attempted to change the IDs as well, but it didn't seem to work. Is it not possible to achieve this, or am ...

javascripthtmlbootstrap-5

Basic color scheme

I'm attempting to change the background color behind a partially transparent .png div. The CSS class that modifies the div is ".alert". Manually editing the .alert class background color works perfectly, and now I want to automate this on a 1-second c ...

javascriptjqueryhtmlcssloops

Does CSS give preference to max width specifications?

Within a div, I have two child div elements. The parent container utilizes a flexbox layout, with preset maximum widths for the children as shown below: <div class="wrap"> <div class="one">Hi</div> <div class="two">my secon ...

htmlcssflexbox

GridView with scroll functionality across various web browsers

I have set up a scrollable gridview with a table that mirrors the header of the grid. Each column has a specific width in pixels, but it seems to render differently across various browsers. Any assistance would be greatly appreciated. This is the HTML mar ...

asp.nethtmlcss

What is the best way to adjust the width of a textarea based on its content

How can I dynamically set the width of a React Semantic UI textarea based on its content? Setting min-width doesn't seem to be working. Any suggestions? <Textarea key={idx} defaultValue={formattedText} className="customInpu ...

javascriptcssreactjstextareasemantic-ui

Bootstrap 4 sidebar with a static width, when switched to mobile view the main content area vanishes

While searching for a solution to create a fixed width sidebar on Bootstrap 4, I have come across many examples. However, none of them seem to maintain the main content on mobile devices. I have experimented with the following code: <div class="row no ...

csstwitter-bootstrapbootstrap-4

The jsonGenerator is unable to process strings containing spaces

Hey, I'm having trouble passing a string with whitespaces to my JavaScript function using jsonGenerator. Here's the code snippet: jGenerator.writeStringField(cols[8], ap.getContentId() != null ? "<img src='img/active.png' onclick=au ...

javajavascripthtmljson

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

htmlcss

Despite being correctly linked in EJS and without any errors, the CSS is still not loading

Hey there, I'm facing an issue with linking a CSS file to an EJS file. I believe that I am connecting them correctly: <head> <title>Acres & Karats Calculator</title> <base href="/"> <link type="text/css" href="css/Acres ...

cssnode.jsexpressejs

The CSS property input::-webkit-outer-spin-button adjusts the margin-left and is exclusively visible in Chrome browser

Strange things are happening... Let me share the code for my inputs: #sign_in input#submit { height: 56px; background-color: #88b805; font-weight: bold; text-decoration: none; padding: 5px 40px 5px 40px; /* top, right, bottom, left ...

webkitcss

Building a Horizontal Line Component in ReactJS

Looking for help with my login page design. I have two login buttons - one for regular login and one for Google login. I want to add a stylish horizontal line with the word "OR" between the buttons, similar to the image in the link provided. https://i.sst ...

cssreactjsmaterial-uireact-hooksjss

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

javascriptjqueryhtmlcss

The functionality of the jQuery button subscription is completely ineffective

I am attempting to display search results on the same page, but I'm encountering an issue. Here is my code: <form id="myForm"> <input id="filter_id" type="text"/> <input type="submit" id="load_results" value="Search" /> < ...

jqueryhtmlasp.net-mvc