CODEWITHSUNDEEP
htmlcss
Misha
Misha

Reputation: 31

how to make all are pictures horizontally in html?

I can't figure out how to get my pictures horizontal.. I am using bootstrap and emmet. I have tried floats and display.Here's my code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Лучшие в мире товары!</title>
</head>
<style>
  body {
    background: #ffffff;
    /* Цвет фона */
    color: #800080;
    /* Цвет текста */
  }
  
  bottombanner {
    display: table;
  }
  
  .col-sm-3 {
    display: table-cell;
    vertical-align: middle;
  }
</style>

<body>
  <h1 align="center">Телефоны недорого</h1>
  <h2 align="center">Здесь вы сможете найти телефоны по низкой цене</h2>
  <hr>
  <p>
    <div>
      <img src="C:\Users\Misha\Pictures\s-l640.jpg" width="200" height="200"><a>7000грн</a>
      <p2><input type="button" value="Купить"></p>
  <img src="C:\Users\Misha\Pictures\iphone-11-pro-max-gold.jpg" width="210" height="210" alt="36999">
  <a>3699грн</a>
  <p2><input type="button" value="Купить"></p>
    <img src="" width="200" height="200"><a>5499грн</a>
    <p3><input type="button" value="Купить" onclick="window.location.href='https://allo.ua/'">
      </div>
      </p>
      <hr>
</body>

</html>

I just want to know how to align this pictures horizontally because the aligned vertically I just want to align in horizontally

Upvotes: 0

Views: 39

Answers (2)

Fares
Fares

Reputation: 1

I'm not bootstrap fan, but you can try this using flexbox (css grid works too):

div {
display: flex;
flex-direction: row; /*default*/
flex-wrap: wrap; /* set it to nowrap if you want... but you should add overflow-x: auto/scroll */
}

Upvotes: 0

Ahmad Habib
Ahmad Habib

Reputation: 2384

You can use display: flex; and then flex-direction: row;.

For example:

.flex-middle {
  display: flex;
  flex-direction: row;
}
<h1 align="center">Телефоны недорого</h1>
<h2 align="center">Здесь вы сможете найти телефоны по низкой цене</h2>
<hr>
<p>
  <div class="flex-middle">
    <img src="https://i.picsum.photos/id/739/536/354.jpg?hmac=nY1QYkukDSxwWX4NIoyNPhjnN8vlE65gCjWYW0Wl8tg" width="200" height="200"><a>7000грн</a>
    <p><input type="button" value="Купить">
    </p>
    <img src="https://i.picsum.photos/id/739/536/354.jpg?hmac=nY1QYkukDSxwWX4NIoyNPhjnN8vlE65gCjWYW0Wl8tg" width="210" height="210" alt="36999">
    <a>3699грн</a>
    <p><input type="button" value="Купить">
    </p>
    <img src="https://i.picsum.photos/id/739/536/354.jpg?hmac=nY1QYkukDSxwWX4NIoyNPhjnN8vlE65gCjWYW0Wl8tg" width="200" height="200"><a>5499грн</a>
    <p><input type="button" value="Купить" onclick="window.location.href='https://allo.ua/'">
    </p>
  </div>
  <hr>

Working FIDDLE

Upvotes: 1

Related Questions