css 我怎样才能把我的图标放在我左边的矩形中间？

jljoyd4f 于 2023-04-08 发布在其他

关注(0)|答案(2)|浏览(141)

我试图把我的位置图标在我的矩形在左侧的中间。我已经尝试了text-align：center，但它的结果是这样的：
谁能让我高兴
My result is like this

css

来源：https://stackoverflow.com/questions/75921766/how-can-i-place-my-icon-in-the-middle-of-my-rectangle-at-left

2条答案

按热度按时间

owfi6suc1#

如果你的标记是svg，那么它可以被重定向如下（我建议你观看有关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>

赞(0）回复(0）举报 2023-04-08

pinkon5k2#

在表单的元素中使用display: inline-flex;和一些padding：

.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>

赞(0）回复(0）举报 2023-04-08

我来回答

css 我怎样才能把我的图标放在我左边的矩形中间？

2条答案

相关问题

热门标签

最新问答