1

I have a list of n items.

I'm trying to align the a element having child img, next to sibling p element.

I've tried setting both to display:inline-block, but I don't see any change. My code looks like this:

<li> <h3>Header 3</h3> <a href="#"><img src="example.img" alt=""></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> </li>

My goal is to create a sort of panel where the a element is to the left with the text next to it, and the h3 centered in that same panel.

<li> <h3>Header 3</h3> <a href="#"> <img src="example.img" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> </li>

Improve this question

2 Answers 2

Reset to default
1

I didn't understand what your question goal. But, tell me if my answer was wrong :)

li{ list-style: none; } h3{ text-align: center; } img{ float: left; } p{ text-align: right; }
<li> <h3>Header 3</h3> <a href="#"><img src="example.img" alt=""></a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> </li>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

use display:inline-block in a and p and set some width, use text-align:center in h3

body, h3, p { margin: 0; font-size:16px /* restore font-size inline-block fix*/ } h3 {text-align: center} ul { margin: 0; padding: 0; font-size: 0 /*inline-block fix gap*/ } li { background: red; } a, li, p { display: inline-block; vertical-align: top; width: 50% } img { width: 100%; display: block }
<ul> <li> <h3>Header 3</h3> <a href="#"> <img src="//lorempixel.com/100/100" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> </li> <li> <h3>Header 3</h3> <a href="#"> <img src="//lorempixel.com/100/100" alt=""> </a> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> </li> </ul>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.