主页 / 问题 / 816603
Accepted
Новиков Максим
Asked:2020-04-20 02:02:01 +0000 UTC2020-04-20 02:02:01 +0000 UTC

水平对齐div

  • 772

你好，我有以下代码：

.about-me-block {
  width: auto;
  height: 600px;
  background-color: #CAF7E2;
  padding: 0 10%;
}

.profile-block {
  width: auto;
  height: 300px;
  background-color: #456990;
}

.profile-image {
  width: 300px;
  height: 300px;
  background-color: #F45B69;
  display: inline-block;
  float: left;
}

.profile-text {
  width: 200px;
  height: 200px;
  background-color: #E4FDE1;
  display: inline-block;
}
<div class="about-me-block">
  <div class="profile-block">
    <div class="profile-image"></div>
    <div class="profile-text"></div>
  </div>
</div>

如何在profile-text不使用填充的情况下水平居中对齐？我尝试了帮助vertical-align，但没有奏效。

html

1 个回答

  1. Best Answer

    绝对定位的变体：

    * {
  margin: 0;
  padding: 0;
}

.about-me-block {
  width: auto;
  height: 600px;
  background-color: #CAF7E2;
  padding: 0 10%;
}

.profile-block {
  position: relative;
  width: auto;
  height: 300px;
  background-color: #456990;
}

.profile-image {
  width: 300px;
  height: 300px;
  background-color: #F45B69;
  display: inline-block;
  float: left;
}

.profile-text {
  /*BEGIN*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /*END*/
  width: 200px;
  height: 200px;
  background-color: #E4FDE1;
  display: inline-block;
}
    <div class="about-me-block">
  <div class="profile-block">
    <div class="profile-image"></div>
    <div class="profile-text"></div>
  </div>
</div>

    变体Flexbox：

    * {
  margin: 0;
  padding: 0;
}

.about-me-block {
  width: auto;
  height: 600px;
  background-color: #CAF7E2;
  padding: 0 10%;
}

.profile-block {
  /*BEGIN*/
  display: flex;
  align-items: center;
  /*END*/
  width: auto;
  height: 300px;
  background-color: #456990;
}

.profile-image {
  width: 300px;
  height: 300px;
  background-color: #F45B69;
}

.profile-text {
  width: 200px;
  height: 200px;
  background-color: #E4FDE1;
}
    <div class="about-me-block">
  <div class="profile-block">
    <div class="profile-image"></div>
    <div class="profile-text"></div>
  </div>
</div>

    • 1

相关问题