Как выравнять ровню по центру рядом с картинкой (HTML, CSS)

Question

Всем привет я создал для себя мини интернет магазин уже пару часов голову ломаю, шаманил по разному с CCS но не получается. У меня на сайте картинка кроссовок находится правильно в центре, а вот описание кроссовок вообще сбоку, и Detail тоже самое. Как можно написать так, чтобы ровно все показывало, описание были в центре рядом с картинкой в точь-в-точь.

body {
  margin: 0;
  padding: 0;
  color: #999;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.4em;
  background-color: #665f5f;
  background-repeat: repeat;
  background-image: url(images/fon.png)
}

a,
a:link,
a:visited {
  color: #0299aa;
  font-weight: normal;
  text-decoration: none
}

a:hover {
  text-decoration: underline;
}

a.addtocart {
  display: inline-block;
  width: 80px;
  height: 21px;
  line-height: 21px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  background: url(images/templatemo_addtocart.png)
}

a.detail {
  display: inline-block;
  width: 64px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #333;
  background: url(images/templatemo_detail.png)
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  font-weight: normal;
}

h1 {
  font-size: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 0
}

h2 {
  font-size: 26px;
  margin: 0 0 25px;
  padding: 5px 0
}

h3 {
  font-size: 20px;
  margin: 0 0 20px;
  padding: 0;
}

h4 {
  font-size: 16px;
  margin: 0 0 15px;
  padding: 0;
}

h5 {
  font-size: 14px;
  margin: 0 0 10px;
  padding: 0;
}

h6 {
  font-size: 12px;
  margin: 0 0 5px;
  padding: 0;
}

.cleaner {
  clear: both
}

.h10 {
  height: 10px
}

.h20 {
  height: 20px
}

.h30 {
  height: 30px
}

.h40 {
  height: 40px
}

.h50 {
  height: 50px
}

.float_r {
  margin-left: auto;
  margin-right: auto;
  width: 40em;
}

.bs_box {
  clear: both;
  margin-bottom: 20px
}

.bs_box img {
  float: left;
  margin-right: 10px;
  border: 4px solid #fff
}

.bs_box h4 {
  margin-bottom: 0
}

.bs_box h4 a {
  font-size: 11px;
  color: #000;
  font-weight: 700
}

.bs_box .price {
  font-size: 12px;
  font-weight: 700;
  color: #11bdd1
}

.product_box {
  width: 30em;
  text-align: center;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
  border-bottom: 1px dotted #ccc
}

.product_box img {
  margin-bottom: 5px;
}

.product_box h3 {
  font-size: 11px;
  color: #000;
  font-weight: 700;
  margin-bottom: 10px;
}

.product_box .product_price {
  color: #11bdd1;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
}

.product_box .addtocart {
  float: left;
  display: block;
}

.product_box .detail {
  float: right;
  display: block;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Shoes Store from templatemo</title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="/templatemo_style.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
  <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/ddsmoothmenu.js"></script>

  <script type="text/javascript">
    ddsmoothmenu.init({
      mainmenuid: "top_nav", //menu DIV id
      orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
      classname: 'ddsmoothmenu', //class added to menu's outer DIV
      //customtheme: ["#1c5a80", "#18374a"],
      contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
  </script>
</head>

<body>
  <h1 align="center">Mini Shop on Spring Framework by Adil</h1>
  <div data-th-each="product : ${products}" class="product product_box">
    <h3 data-th-text="${product.title}"></h3>
    <a data-th-href="@{/catalog/products/{productId}(productId=${product.id})}" class="detail"><img src="/images/product/01.jpg" alt="Shoes 1" /></a>
    <p data-th-text="${product.description}"></p>
    <p class="product_price">34000 Тенге</p>
    <a data-th-href="@{/catalog/products/{productId}(productId=${product.id})}" class="detail"></a>
  </div>

  <div class="cleaner"></div>
</body>

</html>

БЛОГ НА HUSL

Как выравнять ровню по центру рядом с картинкой (HTML, CSS)

Ответы (0 шт):