Question

所以我遇到问题，要让代码中的文本和按钮在100px高度div中垂直对齐。我一直在四处寻找小小的帮助，有人可以帮我把文字和按钮垂直对齐在中间吗？

.div111 {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin-bottom: 10px;
  background-color: #1a1a1a;
}

.div1111 {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  margin: 0px;
  border-top: 1px solid #e6e6e6;
}

.div4 {
  width: 24%;
  margin: 0.5%;
  float: left;
  height: 100px;
  vertical-align: middle;
  display: table-cell;
}

.tekst3 {
  text-align: center;
  color: white;
  opacity: 1;
  line-height: 2;
  font-size: 17px;
  vertical-align: middle;
  margin-top: 25px;
}

.button {
  width: 50%;
  height: 50px;
  vertical-align: middle;
  font-size: 17px;
  color: #1a1a1a;
  background-color: #e6e6e6;
  border: none;
  margin: 25px;
}

.button:hover {
  background-color: #1a1a1a;
  color: #e6e6e6;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

<div id="tickets" class="div111">

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                <u><b>Time/Date:</b></u>
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                <u><b>Place:</b></u>
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                <u><b>Place:</b></u>
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                <u><b>Tickets:</b></u>
              </p>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                12 July 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Slottsfjellet i Tønsberg
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Tønsberg
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">

              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Ukespass Øyafestivalen 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Tøyenparken (Oslo)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" onclick="return false" class="button">Sold out</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                10 August 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Torsdagsbilett Øyafestivalen 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Tøyenparken (Oslo)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                15 September 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Sigrid
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                USF Verftet (Bergen)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                03 August 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Wilderness Festival 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Cornbury Park (Charlbury, United Kingdom)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">

              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Sigrid
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Scala (London, United Kingdom)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" onclick="return false" class="button">Sold out</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                14 September 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Sigrid
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Scala (London, United Kingdom)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
          </div>

          <div class="div1111">
            <div class="div4">
              <p class="tekst3">
                01 November 2017
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Sigrid
              </p>
            </div>
            <div class="div4">
              <p class="tekst3">
                Melkweg OZ (Amsterdam, Nederland)
              </p>
            </div>
            <div class="div4">
              <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
          </div>

        </div>

Answer 1

简单。

在div4移除vertical-align:middle并更改display:table

和

在tekst3添加display:table-cell

那将完成这项工作。

Answer 2

float 杀死 display，将其删除，table-cell显示将完成其工作。家长可以收到display:table

＆＃13;

.div111 {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin-bottom: 10px;
  background-color: #1a1a1a;
}

.div1111 {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  margin: 0px;
  border-top: 1px solid #e6e6e6;
  display: table;/* added could be optionnal */
}

.div4 {/* float removed */
  width: 24%;
  margin: 0.5%;
  height: 100px;
  vertical-align: middle;
  display: table-cell;
}

.tekst3 {
  text-align: center;
  color: white;
  opacity: 1;
  line-height: 2;
  font-size: 17px;
  vertical-align: middle;
  margin-top: 25px;
}

.button {
  width: 50%;
  height: 50px;
  vertical-align: middle;
  font-size: 17px;
  color: #1a1a1a;
  background-color: #e6e6e6;
  border: none;
  margin: 25px;
}

.button:hover {
  background-color: #1a1a1a;
  color: #e6e6e6;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

＆＃13;

<div id="tickets" class="div111">

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        <u><b>Time/Date:</b></u>
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        <u><b>Place:</b></u>
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        <u><b>Place:</b></u>
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        <u><b>Tickets:</b></u>
      </p>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        12 July 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Slottsfjellet i Tønsberg
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Tønsberg
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" class="button">Tickets</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">

      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Ukespass Øyafestivalen 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Tøyenparken (Oslo)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" onclick="return false" class="button">Sold out</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        10 August 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Torsdagsbilett Øyafestivalen 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Tøyenparken (Oslo)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" class="button">Tickets</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        15 September 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Sigrid
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        USF Verftet (Bergen)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" class="button">Tickets</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        03 August 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Wilderness Festival 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Cornbury Park (Charlbury, United Kingdom)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" class="button">Tickets</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">

      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Sigrid
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Scala (London, United Kingdom)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" onclick="return false" class="button">Sold out</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        14 September 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Sigrid
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Scala (London, United Kingdom)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" class="button">Tickets</button></a>
    </div>
  </div>

  <div class="div1111">
    <div class="div4">
      <p class="tekst3">
        01 November 2017
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Sigrid
      </p>
    </div>
    <div class="div4">
      <p class="tekst3">
        Melkweg OZ (Amsterdam, Nederland)
      </p>
    </div>
    <div class="div4">
      <a href="#"><button type="button" class="button">Tickets</button></a>
    </div>
  </div>

</div>

＆＃13;

Answer 3

为了在垂直中间设置文本，您需要文本元素的高度，并且容器要相同，并且文本行高度需要与此设置高度匹配。我发现<p>元素导致这种对齐问题，这是我更喜欢使用<span>元素的方式。

使用此方法可能会为您节省大量时间

https://jsfiddle.net/suunyz3e/1433/

HTML：

<div ng-app="myModule" ng-controller="myCtrl">
    <div id="tickets" class="div111">

        <div class="div1111">
            <div class="div4">
              <span class="tekst3">
                <u><b>Time/Date:</b></u>
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                <u><b>Place:</b></u>
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                <u><b>Place:</b></u>
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                <u><b>Tickets:</b></u>
              </span>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
              <span class="tekst3">
                12 July 2017
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                Slottsfjellet i Tønsberg
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                Tønsberg
              </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
              <span class="tekst3">

              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                Ukespass Øyafestivalen 2017
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                Tøyenparken (Oslo)
              </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" onclick="return false" class="button">Sold out</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
              <span class="tekst3">
                10 August 2017
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                Torsdagsbilett Øyafestivalen 2017
              </span>
            </div>
            <div class="div4">
              <span class="tekst3">
                Tøyenparken (Oslo)
              </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
              <span class="tekst3">
                15 September 2017
              </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Sigrid
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    USF Verftet (Bergen)
                </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
                <span class="tekst3">
                    03 August 2017
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Wilderness Festival 2017
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Cornbury Park (Charlbury, United Kingdom)
                </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
                <span class="tekst3">

                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Sigrid
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Scala (London, United Kingdom)
                </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" onclick="return false" class="button">Sold out</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
                <span class="tekst3">
                    14 September 2017
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Sigrid
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Scala (London, United Kingdom)
                </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
        </div>

        <div class="div1111">
            <div class="div4">
                <span class="tekst3">
                    01 November 2017
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Sigrid
                </span>
            </div>
            <div class="div4">
                <span class="tekst3">
                    Melkweg OZ (Amsterdam, Nederland)
                </span>
            </div>
            <div class="div4">
                <a href="#"><button type="button" class="button">Tickets</button></a>
            </div>
        </div>

    </div>
</div>

的CSS：

.div111 {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin-bottom: 10px;
  background-color: #1a1a1a;
}

.div1111 {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
  margin: 0px;
  border-top: 1px solid #e6e6e6;
}

.div4 {
  width: 24%;
  margin: 0.5%;
  float: left;
  height: 100px;
  vertical-align: middle;
  display: table-cell;
}

.tekst3 {
  display:block;
  height:100px;//inherit
  line-height:100px;
  text-align: center;
  color: white;
  opacity: 1;
 // line-height: 2;
  font-size: 17px;
//  vertical-align: middle;
//  margin-top: 25px;
}

.button {
  width: 50%;
  height: 50px;
  vertical-align: middle;
  font-size: 17px;
  color: #1a1a1a;
  background-color: #e6e6e6;
  border: none;
  margin: 25px;
}

.button:hover {
  background-color: #1a1a1a;
  color: #e6e6e6;
  border: 1px solid #e6e6e6;
  cursor: pointer;
}

垂直对齐到中间的问题

3 个答案: