CODEWITHSUNDEEP
htmlcss
Wondering Coder
Wondering Coder

Reputation: 1702

centering 2 images in a row in css

I have a problem. I am able to display two images without using <.tr><.td> but using div element. Also I want it to be centered in my page. But the centering part eludes me. I've attached my css and html code so anyone can try it .

My html 

 <div style='align:center;'>
    <div class="img">
                <a target="_blank" href="klematis_big.htm">
                <img class="images" src="/assets/images/e_mail.png" alt="..."  width="110" height="90" >
                </a>
                <div class="desc">E-mail</div>
            </div>
            <div class="img">
                <a target="_blank" href="klematis2_big.htm">
                <img class="images" src="/assets/images/sns.png" alt="Klematis" width="110" height="90" />
                </a>
                <div class="desc">SNS</div>
            </div>
            <div style="clear:both;"></div>
            <div class="img">
                <a target="_blank" href="klematis3_big.htm">
                <img class="images" src="/assets/images/promo.png" alt="Klematis" width="110" height="90" />
                </a>
                <div class="desc">Promos</div>
            </div>
                <div class="img">
                <a target="_blank" href="klematis4_big.htm">
                <img class="images" src="/assets/images/whats_hot.png" alt="Klematis" width="110" height="90" />
                </a>
                <div class="desc">What's Hot?'</div>
            </div>
   </div>

My style/css

<style type="text/css">
  div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
  div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
  div.img a:hover img
  {
  border:1px solid #0000ff;
  }
  div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }
  </style>

Hope anyone can help me here. Thanks in advance.

Upvotes: 0

Views: 925

Answers (2)

Ian Hoar
Ian Hoar

Reputation: 1184

Here's an example of how you could center images in a div with titles below. You could also add links or more div's and CSS within each block.

http://jsfiddle.net/GVRk9/1/

Upvotes: 1

pascal
pascal

Reputation: 2713

Here's a more semantic way of doing this:

<ul class="menu">
  <li class="email"><a href="klematis_big.htm">E-Mail</a></li>
  <li class="sns"><a href="klematis2_big.htm">SNS</a></li>
  <li class="promo"><a href="klematis3_big.html">Promos</a></li>
</ul>

And

.menu {
  list-style-type: none outside;
  padding: 0; margin: 0;
  text-align: center;
}
.menu li { display: inline; }
.menu a {
  min-width: 110px;
  padding-top: 95px;
  display: inline-block;
  background: 50% 0 no-repeat;
}
.menu a:hover, .menu a:focus {
  background-color: yellow;
}
.menu .email a {
  background-image: url(/assets/images/e_mail.png);
}
.menu .sns a {
  background-image: url(/assets/images/sns.png);
}
.menu .promo a {
  background-image: url(/assets/images/promo.png);
}

This splits content and design: the images in the original code are only for design, not content, so they should be defined in the CSS. Also, people expect to be able to click on the text and icon, not only one. If you leave no spaces between the <li>s you can create a nicer toolbar without gaps between the buttons. Using a list instead of a bunch of <div>s will help search engines and screen readers understand the content better (it should probably be all wrapped in a <nav> if you use HTML5)

Upvotes: 2

Related Questions