CODEWITHSUNDEEP
csshtmljquery-mobilehtml-lists
Baz
Baz

Reputation: 13135

Centre image within html list with css

I have the following:

JSFiddle

and I wish for the images to be centred vertically for each item in the list. How can I do this?

<li>
   <img src="Scotland.jpg" />
   <h3>Scotland 4</h3>
   <p>P1</p>
   <p>P2</p>
   <p>P3</p>
   <p>P4</p>
   <p>P5</p>
   <p>P6</p>
   <p>P7</p>
   <p>P8</p> 
</li>

Upvotes: 1

Views: 67

Answers (2)

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

Here is JSFiddle

img {
  position:absolute;
  top:0;
  bottom:0;
  margin:auto;
}

Upvotes: 1

Itay
Itay

Reputation: 16777

jsFiddle Demo

Add these CSS blocks:

li {
    position: relative;
}
li img {
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

P.S - Notice that these CSS selectors are way too general, so use a container class or ID to make them more specific.

Upvotes: 2

Related Questions