How can I place my icon in the middle of my rectangle at left? - Html

PriyaSendhil
April 3, 2023
192 views
0 votes
2 Answers

I am trying to place my location icon in the middle of my rectangle at left side. I’ve tried text-align:center but it results like this:

can anyone please me

My result is like this

Answers

If your marker is svg, then it can be redirected as follows
(I advise you to watch videos about Flexbox)

.container {
  display: flex;
}

.div_1 {
  background: #eeebeb;
  width: 161px;
  height: 40px;
}

.div_2 {
  background: white;
  width: 161px;
  height: 40px;
}

.div_3 {
  background: #0065fc;
  width: 161px;
  height: 40px;
}

svg {
  width: 24px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div style="margin: 0 auto" class="container">
    <div class="div_1 center"></div>
    <div class="div_2 center">
      <?xml version="1.0" encoding="utf-8"?>
      <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 21.25C11.853 21.2514 11.7093 21.2059 11.59 21.12C11.29 20.93 4.25 16.2 4.25 10.45C4.25 8.39452 5.06652 6.42328 6.51992 4.96987C7.97333 3.51647 9.94457 2.69995 12 2.69995C14.0554 2.69995 16.0267 3.51647 17.4801 4.96987C18.9335 6.42328 19.75 8.39452 19.75 10.45C19.75 16.2 12.75 20.93 12.41 21.12C12.2907 21.2059 12.147 21.2514 12 21.25ZM12 4.24995C10.3494 4.24463 8.7642 4.89454 7.59238 6.05699C6.42056 7.21943 5.75794 8.79939 5.75 10.45C5.75 14.66 10.54 18.51 12 19.58C13.46 18.51 18.25 14.66 18.25 10.45C18.2421 8.79939 17.5794 7.21943 16.4076 6.05699C15.2358 4.89454 13.6506 4.24463 12 4.24995Z" fill="#000000"/>
      <path d="M12 12.75C11.4561 12.75 10.9244 12.5887 10.4722 12.2865C10.0199 11.9844 9.66747 11.5549 9.45933 11.0524C9.25119 10.5499 9.19673 9.99695 9.30284 9.4635C9.40895 8.93006 9.67086 8.44005 10.0555 8.05546C10.4401 7.67086 10.9301 7.40895 11.4635 7.30284C11.997 7.19673 12.5499 7.25119 13.0524 7.45933C13.5549 7.66747 13.9844 8.01995 14.2865 8.47218C14.5887 8.92442 14.75 9.4561 14.75 10C14.75 10.7293 14.4603 11.4288 13.9445 11.9445C13.4288 12.4603 12.7293 12.75 12 12.75ZM12 8.75C11.7528 8.75 11.5111 8.82331 11.3055 8.96066C11.1 9.09802 10.9398 9.29324 10.8452 9.52165C10.7505 9.75005 10.7258 10.0014 10.774 10.2439C10.8223 10.4863 10.9413 10.7091 11.1161 10.8839C11.2909 11.0587 11.5137 11.1778 11.7561 11.226C11.9986 11.2742 12.2499 11.2495 12.4784 11.1549C12.7068 11.0602 12.902 10.9 13.0393 10.6945C13.1767 10.4889 13.25 10.2472 13.25 10C13.25 9.66848 13.1183 9.35054 12.8839 9.11612C12.6495 8.8817 12.3315 8.75 12 8.75Z" fill="#000000"/>
    </svg> Marseille, France</div>
    <div class="div_3 center">Search</div>
  </div>

</body>

</html>

Use display: inline-flex; and some padding to your form’s elements:

.search {
  display: inline-flex;
  border: 1px solid #eeebeb;
  border-radius: 0.8rem;
  overflow: hidden;
}

.search * {
  border: 0;
  padding: 0.8rem 1.2rem;
}

.search .icon-pin {
  background: #eeebeb;
  font-style: normal;
}

.search button {
  background: #0065fc;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

<form class="search" action="" method="POST">
  <span class="icon-pin">🚩</span>
  <input name="search" type="search" placeholder="Search city, country…">
  <button>Search</button>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

How can I place my icon in the middle of my rectangle at left? – Html

Answers