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

Implement a responsive CSS division that simulates a two-column table

Looping through elements with jQuery's `each` method within another `

Troubleshooting problems with the CSS code for a progress bar in Gmail

How can PHP be used to display a varying number of items in a slider depending on the size of the screen?

CSS-Styled Vertical Timeline

Adjusting the size of the post title's font

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

Does embedding an Iframe for external files from your server enhance the loading speed of the current page compared to directly loading it on the page?

"Redirecting using parameters upon pressing the enter key: A step-by-step guide

A guide to accessing files and displaying their content by utilizing button clicks in PHP

What is the benefit of utilizing pseudo elements to divide block elements?

Counting Clicks with the Button Counter

chrome side column must be set to 100% height

Scraping a p tag lacking a class attribute with the help of BeautifulSoup4 (Bs4)

Determine how to use both the "if" and "else if" statements in

Difficulty arises with z-index when hover effects are applied to clip-path shapes

The initial render of Next.js is not properly loading the CSS files

Using Angular to convert JSON data to PDF format and send it to the printer

What is the best way to apply a background image to a DIV element using CSS

The Bootstrap navbar collapses and vanishes instantly