CSS中的基本垂直中心在浮动元素

时间：2017-02-17 21:23:46

标签： html css css-position vertical-alignment

所以我通过这3个CSS规则来生活，几乎总是垂直居中任何块级元素：

  .vertically-center {
    position: relative;
    top: 50%;
    transform: translateY( -50% );
  }

经常有效。但是在这种特殊布局的情况下，我构建它是将元素推得太高（部分偏离屏幕），我不知道为什么。

在将我的vertically-center课程添加到portrait-container div之前，网页就是的外观：

enter image description here

此代码段是将vertically-center类添加到portrait-container div后的显示方式：

＆＃13;
＆＃13; 
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.vertically-center {
  position: relative;
  top: 50%;
  transform: translateY( -50% );
}

body {
  overflow: hidden;
}
main {
  padding-top: 50px;
  background: #fafafa;
  text-align: left;
}
.portrait-container {
  float: left;
}
img {
  width: 150px;
  border-radius: 50%;
}
.about-container {
  width: 70%;
  float: right;
}
＆＃13; 
<main class="clearfix">
  <div class="portrait-container vertically-center">
    <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">
  </div>

  <div class="about-container">
    <h3>About</h3>
    <p>
      Hi, I'm John Lesko! This is my art portfolio where I share all 
      of my favorite work. When I'm not creating things, I enjoy excercising,
      playing video games, drinking good Kool Aid, and more.
      
      <br><br> If you'd like to follow me on Twitter, my username is 
      <a href="http://twitter.com">@jletsgo</a>.
    </p>
  </div>
</main>
＆＃13;
＆＃13;
＆＃13;

我只想让图像容器垂直居中，而不管它的父级高度如何。救命？检查元素没有给我任何见解。

编辑：只是为了说明过去这一直对我有用。这是一个jsfiddle：https://jsfiddle.net/9kyjt8ze/4/。为什么它对我有用而不是在这里？

相关问题：What does top: 50%; actually do on relatively positioned elements?

3 个答案:

答案 0 :(得分：2)

你的CSS并不差，但我没有相处。所以这是另一种方法，你可以如何解决它，也许它也有帮助。它总是将图像垂直居中，并且与右侧box的文本数量无关。彩色边框可以帮助显示盒子尺寸的视觉效果。

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}

.portrait-container {
  position: relative;
  margin: 20px 0;
}

.portrait-container:after {
  content: '';
  display: block;
  clear: both;
}

.portrait-container img {
  position: absolute;
  top: calc(50% - 80px); /* 50% from top minus half img height*/
  width: 150px;
  height: 160px;
  border-radius: 50%;
  float: left;
}

.portrait-container {
  border: solid 2px orange;
}

.portrait-container .about-container {
  border: solid 2px green;
  padding: 0 50px;
  margin-left: 150px;        /* this elements should be at least 150px away from left side */
  width: calc(100% - 150px); /* the max width this element should have to be placed */
                             /* next to the image is the total width(100%) - the image width  */
}
＆＃13; 
<main>
  <div class="portrait-container">
    <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">

    <div class="about-container">
      <h3>About</h3>
      <p>
        Hi, I'm John Lesko! This is my art portfolio where I share all 
        of my favorite work. When I'm not creating things, I enjoy excercising,
        playing video games, drinking good fruit punch, and more.

        <br><br> If you'd like to follow me on Twitter, my username is 
        <a href="http://twitter.com">@jletsgo</a>.
      </p>
    </div>
  </div>
</main>

<main>
  <div class="portrait-container">
    <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko">

    <div class="about-container">
      <h3>About</h3>
      <p>
        Hi, I'm John Lesko! This is my art portfolio where I share all 
        of my favorite work. When I'm not creating things, I enjoy excercising,
        playing video games, drinking good fruit punch, and more.

        <br><br> If you'd like to follow me on Twitter, my username is 
        <a href="http://twitter.com">@jletsgo</a>.
      </p>
      <p>
        Hi, I'm John Lesko! This is my art portfolio where I share all 
        of my favorite work. When I'm not creating things, I enjoy excercising,
        playing video games, drinking good fruit punch, and more.

        <br><br> If you'd like to follow me on Twitter, my username is 
        <a href="http://twitter.com">@jletsgo</a>.
      </p>
    </div>
  </div>
</main>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

<强>更新

  

编辑：只是为了说明过去这一直对我有用。这是一个jsfiddle：https://jsfiddle.net/9kyjt8ze/4/。为什么它对我有用而不是在这里？

黑圈是小提琴中唯一的元素，没有障碍物。在您遇到问题的代码中，您有许多元素或者包含其他元素捕获它们。如果您开始剥离图层，您的规则集将起作用。或者您可以添加一个属性并根据Snippet 1更改另一个属性。

<小时/> 一个重要提示一个relative元素实际上占据了原始位置，因此如果给出left:40px，则出现将向左移动40px，但实际上它仍占据了它所在位置右侧40px的空间。因此，relative元素实际上并不属于与static元素不同的流程。因此，它们会受到static布局的影响并影响它，它通常通常 ，因为它们会与z-index叠加。

Snippet 2是一个交互式演示，我想这可能有助于更好地解释事情。

<小时/> 3 CSS规则集是垂直对齐元素的常用方法，但最初是position: absolute而不是position:relative，如果我没记错的话，它必须在另一个position ed元素中。

<强>参考

<强>解 

.vertically-center {
  /* Changed to absolute from relative */
  position: absolute;
  top: 50%;
  transform: translateY( -50% );
}
main {
  /* Added position: relative */
  position: relative;
  padding-top: 50px;
  background: #fafafa;
  text-align: left;
}

SNIPPET 1

＆＃13;
＆＃13; 
.vertically-center {
  position: relative;
  top: 50%;
  transform: translateY( -50%);
}

body {}

main {
  padding-top: 50px;
  overflow: scroll;
  background: #fafafa;
  text-align: left;
}

img {
  width: 150px;
  border-radius: 50%;
  float: left;
}

.about {
  width: calc(100% - 150px);
  float: right;
}
＆＃13; 
<main class="clearfix">

  <img src="http://i.imgur.com/Eb5sRZr.jpg" alt="Portrait of John Lesko" class="vertically-center">


  <article class="vertically-center about">
    <h3>About</h3>
    <p>
      Hi, I'm John Lesko! This is my art portfolio where I share all of my favorite work. When I'm not creating things, I enjoy excercising, playing video games, drinking good Kool Aid, and more.</p>

    <p>If you'd like to follow me on Twitter, my username is
      <a href="http://twitter.com">@jletsgo</a>.
    </p>
  </article>
</main>
＆＃13;
＆＃13;
＆＃13;

SNIPPET 2

＆＃13;
＆＃13; 
$('#b1').click(function() {
  $('body').toggleClass('R S');
});

$('#b2').click(function() {
  $('#N1,#N2,#N3').toggleClass('N M');
});

$('input[id$="2"]').on('input', function() {
  var grp = "." + $(this).attr('class');
  var num = parseInt($(this).val(), 10);
  grp !== '.S' ? $('section' + grp).css('left', num + '%') : $('section.S').css('margin-left', num + '%');
});

$('input[id$="3"]').on('input', function() {
  var grp = "." + $(this).attr('class');
  var num = parseInt($(this).val(), 10);
  grp !== '.S' ? $('section' + grp).css('top', num + '%') : $('section.S').css('margin-top', num + '%');
});
＆＃13; 
html,
body {
  height: 100%;
  width: 100%;
}

body {
  overflow: scroll;
  font: 400 12px/1.2 Consolas;
}

section {
  width: 50px;
  height: 150px;
  border: 2px dashed grey;
  text-align: center;
  color: white;
}

.R {
  position: relative;
  background: rgba(0, 0, 255, .3)
}

.A {
  position: absolute;
  background: rgba(255, 0, 0, .3)
}

.F {
  position: fixed;
  background: rgba(0, 255, 0, .3)
}

.S {
  position: static;
  background: rgba(122, 122, 0, .3)
}

.N {
  position: absolute;
  background: yellow;
  color: blue;
}

.M {
  position: relative;
  background: black;
  color: yellow;
}

#R1 {
  left: 20%;
  top: 3%;
  z-index: 1;
}

#A1 {
  left: 42%;
  top: 44%;
  z-index: 2;
}

#F1 {
  right: 20%;
  top: 44%;
  z-index: 3;
}

#S1 {
  margin-left: 0;
  margin-top: -28%;
}

#N1 {
  bottom: 0;
  right: 0;
  width: 25px;
  height: 80px;
  z-index: 4;
}

input {
  width: 6ex;
  position: static !important;
}

button {
  font: inherit;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class='S'>
  <fieldset>
    <button id='b1'>Body Relative/Static</button>
    <button id='b2'>Nested Absolute/Relative</button>
    <br><br> RLeft
    <input id='R2' class='R' type='number' value='20'> RTop
    <input id='R3' class='R' type='number' value='3'> ALeft
    <input id='A2' class='A' type='number' value='44'> ATop
    <input id='A3' class='A' type='number' value='44'><br> FLeft
    <input id='F2' class='F' type='number' value='64'> FTop
    <input id='F3' class='F' type='number' value='44'> SLeft
    <input id='S2' class='S' type='number' value='0'> STop
    <input id='S3' class='S' type='number' value='-28'><br> NLeft
    <input id='N2' class='N' type='number' value='45'> NTop
    <input id='N3' class='N' type='number' value='45'>

  </fieldset>

  <section id='R1' class='R'>RELATIVE
    <section id='N1' class='N'>N<br>E<br>S<br>T<br>E<br>D</section>
  </section>
  <section id='A1' class='A'><br><br><br>ABSOLUTE</section>
  <section id='F1' class='F'><br><br>FIXED</section>
  <section id='S1' class='S'><br><br><br><br><br>STATIC</section>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用代码少得多的flexbox来实现此目的。下面的代码将起到作用。 

.clearfix {
  display: flex;
  align-items: center;
}
img {
  width: 150px;
  border-radius: 50%;
}
.about-container {
  width: 70%;
  padding-left: 30px;
}

在codepen http://codepen.io/anon/pen/OWYxrb

中查看
相关问题
最新问题