当我使用 text-align: left 时，为什么我的 SVG 没有移到文本的左侧？

问题描述 投票：0回答：1

我正在使用 HTML CSS 和 JS 创建一个基本的天气应用程序，现在我正在研究该程序的 CSS。我使用 SVG 作为图标，因为我认为它看起来更好并且你可以更好地控制它们。这是我当前的问题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  background: #222;
}

.container {
  width: 90%;
  max-width: fit-content;
  background: linear-gradient(135deg, #00feba, #5b548a);
  color: white;
  margin: 100px auto 0;
  border-radius: 20px;
  padding: 40px 35px;
  text-align: center;
}

.search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search input {
  border: 0;
  outline: 0;
  background: #ebfffc;
  color: #555;
  padding: 10px 25px;
  height: 60px;
  border-radius: 30px;
  flex: 1;
  margin-right: 16px;
  font-size: 18px;
}

.search button {
  border: 0;
  outline: 0;
  background: #ebfffc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.weather h1 {
  font-size: 80px;
  font-weight: 500;
}

.weather h2 {
  font-size: 45px;
  font-weight: 400;
  margin-top: -10px;
}

.details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 50px;
}

.col {
  display: flex;
  align-items: center;
  text-align: left;
}

.col svg {
  width: 50px;
  margin-right: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="search">
      <input type="text" placeholder="enter city name" spellcheck="false">
      <button><svg viewBox="0 0 24.00 24.00" width="40px" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#000000" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></button>
    </div>
    <div class="weather">
      <h1 class="temp"></h1>
      <h2 class="city"></h2>
      <div class="details">
        <div class="col">
          <div>
            <svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M12,22c2.579,0,4-1.35,4-3.8,0-3.243-3.237-5.871-3.375-5.981a1,1,0,0,0-1.25,0C11.237,12.329,8,14.957,8,18.2,8,20.65,9.421,22,12,22Zm0-7.639A6.153,6.153,0,0,1,14,18.2c0,1.112-.335,1.8-2,1.8s-2-.688-2-1.8A6.153,6.153,0,0,1,12,14.361ZM6.625,2.219a1,1,0,0,0-1.25,0C5.237,2.329,2,4.957,2,8.2,2,10.65,3.421,12,6,12s4-1.35,4-3.8C10,4.957,6.763,2.329,6.625,2.219ZM6,10c-1.665,0-2-.688-2-1.8A6.153,6.153,0,0,1,6,4.361,6.153,6.153,0,0,1,8,8.2C8,9.312,7.665,10,6,10ZM18.625,2.219a1,1,0,0,0-1.25,0C17.237,2.329,14,4.957,14,8.2c0,2.45,1.421,3.8,4,3.8s4-1.35,4-3.8C22,4.957,18.763,2.329,18.625,2.219ZM18,10c-1.665,0-2-.688-2-1.8a6.153,6.153,0,0,1,2-3.839A6.153,6.153,0,0,1,20,8.2C20,9.312,19.665,10,18,10Z"></path></g></svg>
            <p class="humidity">50</p>
            <p>Humidity</p>
          </div>
        </div>
        <div class="col">
          <div>
            <svg fill="white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M14.993 2.99997C14.4439 2.99621 14 2.54995 14 1.99999C14 1.46184 14.467 0.998406 15.0045 1C15.6705 1.00699 16.3542 1.18404 16.9472 1.48057C17.4408 1.72738 17.9649 2.11331 18.3633 2.71092C18.7659 3.31479 19 4.07501 19 4.99999C19 5.92498 18.7659 6.6852 18.3633 7.28907C17.9649 7.88668 17.4408 8.27261 16.9472 8.51942C16.3562 8.81492 15.6671 8.998 15.0021 8.99999L9 8.99999C8.44772 8.99999 8 8.55228 8 7.99999C8 7.44771 8.44772 6.99999 9 6.99999L15.0004 6.99982C15.3603 6.98783 15.7318 6.89107 16.0528 6.73057C16.3092 6.60238 16.5351 6.42581 16.6992 6.17967C16.8591 5.93979 17 5.57501 17 4.99999C17 4.42498 16.8591 4.0602 16.6992 3.82032C16.5351 3.57418 16.3092 3.39761 16.0528 3.26942C15.7302 3.10814 15.3553 3.00987 14.993 2.99997Z" fill="white"></path> <path d="M2 7C1.44772 7 1 7.44772 1 8C1 8.55228 1.44772 9 2 9H6C6.55228 9 7 8.55228 7 8C7 7.44772 6.55228 7 6 7H2Z" fill="white"></path> <path d="M2 11C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H12C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11H2Z" fill="white"></path> <path d="M2 15C1.44772 15 1 15.4477 1 16C1 16.5523 1.44772 17 2 17H5C5.55228 17 6 16.5523 6 16C6 15.4477 5.55228 15 5 15H2Z" fill="white"></path> <path d="M18 18C18 17.4501 18.4439 17.0038 18.993 17C19.3553 16.9901 19.7302 16.8919 20.0528 16.7306C20.3092 16.6024 20.5351 16.4258 20.6992 16.1797C20.8591 15.9398 21 15.575 21 15C21 14.425 20.8591 14.0602 20.6992 13.8203C20.5351 13.5742 20.3092 13.3976 20.0528 13.2694C19.7318 13.1089 19.3603 13.0122 19.0004 13.0002L15 13C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11L19.0021 11C19.6671 11.002 20.3562 11.1851 20.9472 11.4806C21.4408 11.7274 21.9649 12.1133 22.3633 12.7109C22.7659 13.3148 23 14.075 23 15C23 15.925 22.7659 16.6852 22.3633 17.2891C21.9649 17.8867 21.4408 18.2726 20.9472 18.5194C20.3542 18.816 19.6705 18.993 19.0045 19C18.467 19.0016 18 18.5382 18 18Z" fill="white"></path> <path d="M11.993 21C11.4439 21.0038 11 21.4501 11 22C11 22.5382 11.467 23.0016 12.0045 23C12.6705 22.993 13.3542 22.816 13.9472 22.5194C14.4408 22.2726 14.9649 21.8867 15.3633 21.2891C15.7659 20.6852 16 19.925 16 19C16 18.075 15.7659 17.3148 15.3633 16.7109C14.9649 16.1133 14.4408 15.7274 13.9472 15.4806C13.3562 15.1851 12.6671 15.002 12.0021 15L8 15C7.44772 15 7 15.4477 7 16C7 16.5523 7.44772 17 8 17L12.0004 17.0002C12.3603 17.0122 12.7318 17.1089 13.0528 17.2694C13.3092 17.3976 13.5351 17.5742 13.6992 17.8203C13.8591 18.0602 14 18.425 14 19C14 19.575 13.8591 19.9398 13.6992 20.1797C13.5351 20.4258 13.3092 20.6024 13.0528 20.7306C12.7302 20.8919 12.3553 20.9901 11.993 21Z" fill="white"></path> </g></svg>
            <p class="wind">12</p>
            <p>Wind Speed</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

当我在 

text-align: left;
上使用 
.col svg {}
时，svg 不会向左移动。我不确定我是否在这里遗漏了一些东西。

编辑：我试图让 svg 位于文本的左侧。

html css svg
1个回答
0
投票

通过一些轻微的 HTML 更改，您可以设置一些网格，然后将父级中的元素“超级居中”。我随意使用了 

em
的字体大小，这是大多数浏览器的默认字体大小，我发现 
16px
比 
em
更容易让我思考。
请注意左侧的图像和右侧的其他两个“段落”，我使用了 2 列的网格，并使图像占据第一列中网格的两行。


总的目标是整体使用更少的 CSS，并使显示更加一致和响应更快。尝试全页显示，这样你就可以看到所有元素的超级中心效果。






px


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 16px;
}

body {
  background-color: #222;
  height: 100vh;
  padding: 1em;
}

body,
.container,
.weather {
  display: grid;
  place-items: center;
}

.container {
  background: linear-gradient(135deg, #00feba, #5b548a);
  color: white;
  border-radius: 1.25em;
  padding: 2em;
}

.search {
  width: 100%;
  display: flex;
  align-items: center;
  column-gap: 1em;
}

.search>* {
  height: 3.75rem;
  border-radius: 1.875em;
  background-color: #ebfffc;
}

.search input {
  border: 0;
  outline: 0;
  color: #555;
  padding-left: 1.5em;
  padding-right: 1.5em;
  flex: 1;
  font-size: 1.125em;
}

.search button {
  border: 0;
  outline: 0;
  width: 3.75rem;
  cursor: pointer;
  /* "super-center" button image */
  display: grid;
  place-items: center;
}

.weather h1 {
  font-size: 5rem;
  font-weight: 500;
}

.weather h2 {
  font-size: 2.75rem;
  font-weight: 400;
  margin-top: -0.625rem;
}

.details {
  margin-top: 2em;
  display: flex;
  align-items: center;
  column-gap: 1em;
}

.col.forecast {
  display: grid;
  grid-template-columns: 3.125em auto;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 0.625em;
}

.col .image-container {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
}





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.