使用“vertical-align：middle”但我的图像仍然没有垂直居中

Question

我正在尝试垂直居中图像，而CSS（至少在Mac Chrome上）不符合我的t1 :: Tensor '[Two, Two, Two] String t1 = Compose (m1 :> m2 :> VNil) t2 :: Tensor '[Two, Two, Two] String t2 = Compose (m2 :> m1 :> VNil) ghci> t1 `mappend` t2 Compose {getCompose = Compose {getCompose = ("foobaz" :> ("barquux" :> VNil)) :> (("bazfoo" :> ("quuxbar" :> VNil)) :> VNil)} :> (Compose {getCompose = ("bazfoo" :> ("quuxbar" :> VNil)) :> (("foobaz" :> ("barquux" :> VNil)) :> VNil)} :> VNil)} -- i'm not going to try drawing that 规范。

如何将放大镜垂直居中？

vertical-align:middle

body {
  background-color: grey;
}
#logo {
  margin: 0 auto;
  padding: 10px;
}
#searchForm {
  padding: 20px;
}
#search-form {
  background-color: orange;
  display: flex;
  flex: 1 0 auto;
}
#last_name,
#event {
  margin-left: 1px;
}
#first_name,
#last_name {
  width: 20%;
}
#event {
  flex-grow: 1;
}
/* Do not specify width to allow it to grow freely */

.search_button {
  width: 40px;
  height: 40px;
}
/* Predefine image dimensions to ensure proper aspect ratio */

#loginArea {
  border-radius: 25px;
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}
@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }
  #first_name {
    width: 50%;
    margin: 0;
  }
  #last_name {
    width: calc(50% - 1px);
    margin-left: 1px;
  }
  #event {
    width: calc(100% - 40px);
    margin: 0;
  }
}
.searchField {
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}

这是小提琴 - https://jsfiddle.net/tbausb1g/1/。

Answer 1

您的灵活容器（form）具有默认align-items: stretch。

将其切换为align-items: center或为输入提供图片align-self: center。

vertical-align: middle无效，因为它仅适用于内联和表格单元格（spec）。

body {
  background-color: grey;
}
#logo {
  margin: 0 auto;
  padding: 10px;
}
#searchForm {
  padding: 20px;
}
#search-form {
  background-color: orange;
  display: flex;
  flex: 1 0 auto;
  align-items: center; /* NEW */
}
#last_name,
#event {
  margin-left: 1px;
}
#first_name,
#last_name {
  width: 20%;
}
#event {
  flex-grow: 1;
}
/* Do not specify width to allow it to grow freely */

.search_button {
  width: 40px;
  height: 40px;
}
/* Predefine image dimensions to ensure proper aspect ratio */

#loginArea {
  border-radius: 25px;
  font-size: 20px;
  padding: 20px;
  background-color: #ffffff;
  color: #000000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  max-width: 580px;
}
@media (max-width: 620px) {
  #search-form {
    flex-wrap: wrap;
  }
  #first_name {
    width: 50%;
    margin: 0;
  }
  #last_name {
    width: calc(50% - 1px);
    margin-left: 1px;
  }
  #event {
    width: calc(100% - 40px);
    margin: 0;
  }
}
.searchField {
  line-height: 40px;
  font-size: 22px;
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
}

<div id="loginArea">
  <div id="searchForm">
    Search For Results
    <br />
    <div>
      <form id="search-form" action="/events/search" accept-charset="UTF-8" method="get">
        <input name="utf8" type="hidden" value="✓">
        <input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField">
        <input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField">
        <input type="text" name="event" id="event" placeholder="Event" class="searchField">
        <input alt="Search" type="image" style="vertical-align:middle" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
      </form>
    </div>
  </div>

</div>