CODEWITHSUNDEEP
htmlcsshtml-lists
Luis
Luis

Reputation: 11

Aligning elements within a list element

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>

Upvotes: 1

Views: 58

Answers (2)

dippas
dippas

Reputation: 60543

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>

Upvotes: 1

user4913965
user4913965

Reputation:

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>

Upvotes: 1

Related Questions