Make sure the image is aligned in line with the unordered list

Question

Make sure the image is aligned in line with the unordered list

I've been having trouble trying to display an image inline with an unordered list.

Here's the HTML code:

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg"/>
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

CSS:

.customer_thumb {
  display: inline-block;
}
.customer-indiv {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: .8em 0;
}
.customer-indiv:nth-child(4) {
  border-bottom: 0;
  padding-bottom: 0;
}
.customer-indiv:first-child {
  padding-top: 0;
}

I want the output to show the image on the left and the 3 list items on the right, which I think my CSS should achieve. Like this:

        name
IMAGE   phone no
        text

However, currently it displays like this:

IMAGE
name
phone no
text

html css

Answer 1

Answer №1

Here are a few methods you can use to achieve that:

Utilizing Flexbox

.customer-indiv {
  display: flex;
  align-items: center;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Using CSS Tables

.customer-indiv {
  display: table;
}
.customer-indiv > a,
.customer-indiv > ul {
  display: table-cell;
  vertical-align: middle;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Creating Inline Blocks

.customer-indiv {
  font-size: 0; /*remove whitespace*/
}
.customer-indiv > a,
.customer-indiv > ul {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Answer 2

Here are a few methods you can use to achieve that:

Utilizing Flexbox

.customer-indiv {
  display: flex;
  align-items: center;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Using CSS Tables

.customer-indiv {
  display: table;
}
.customer-indiv > a,
.customer-indiv > ul {
  display: table-cell;
  vertical-align: middle;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Creating Inline Blocks

.customer-indiv {
  font-size: 0; /*remove whitespace*/
}
.customer-indiv > a,
.customer-indiv > ul {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Answer 3

Answer №2

If you want to achieve this, here is one possible solution:

Check out this code on JSFiddle

Here is the CSS code snippet to accomplish this:

.customer_thumb img { max-width: 50px; display: inline-block; vertical-align: top; }
ul {  display: inline-block; vertical-align: top; margin: 0; }

Answer 4

If you want to achieve this, here is one possible solution:

Check out this code on JSFiddle

Here is the CSS code snippet to accomplish this:

.customer_thumb img { max-width: 50px; display: inline-block; vertical-align: top; }
ul {  display: inline-block; vertical-align: top; margin: 0; }

Make sure the image is aligned in line with the unordered list

Answer №1

Answer №2

Similar questions

How can I access an InputStream from a local XML file in a PhoneGap application?

PHP - the button remains unchanged after submission

Align text in the center of a static container

Reverse the text alteration when the user leaves the field without confirming

Utilizing jQuery to correspond with CSS media queries

Implement automatic data replacement using PHP and MySQL triggers

A numerical input field that removes non-numeric characters without removing existing numbers?

Code snippet in webpage body

Do you know of any online platform that can help me convert W3-theme colors into RGB values?

The production build for Angular 9 Keyvalues pipe fails to compile

CSS causing navigation bar drop down content to be hidden when hovering

Implementing a dynamic loading strategy for Google reCAPTCHA based on language selection

The functionality of the combobox in Vuetify differs from that of an input field

How to manipulate wrapping behavior in flexbox

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

What are some ways to maintain the aspect ratio of an image with two dimensions?

Ways to eliminate the existing image during an image upload process

Mobile browsers are displaying fonts unevenly within tables

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Is there a way to display two words side by side in React components?