相关疑难解决方法(0)

尝试使用垂直居中文本创建圆形，并且存在圆形文本下使用 Flexbox ，

但无法这样做，

• 我必须完全按照下面给出的图片做

我正在分享我的代码

https://stackblitz.com/edit/angular-rzyhff?file=src%2Fapp%2Fapp.component.html

.flex-container {
  display: flex;
  background-color: #DDD8D8;
    justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  height: 25px;
  width: 25px;
  padding: 29px;
  margin: 17px;
  border-radius: 50%
}

<div class="flex-container">
    <div style='background-color: #30D829;'>1</div>
    <div style='background-color: #72A7E5;'>2</div>
    <div style='background-color: #F0CD09;'>3</div>  
    <div style='background-color: #A552ED;'>2</div>
    <div style='background-color: #EF4E92;'>3</div>  
  </div> 

我有一个父div和一个子div.儿童div拥有该position: absolute物业.它已经居中,但我想将它与父div的中间对齐.我该怎么做呢？这是我的jsFiddle

HTML

<div id='parent'>
  <div id='child'>

  </div>
</div>

CSS

#parent {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: red;
}

#child {
  position: absolute;
  width: 70px;
  height: 70px;
  background-color: blue;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 50%;
}

如何在矩形中间对齐这个内容词。“测试”一词在顶部。我使用了所有东西， text-align:center; Vertical-align:middle, justify-content:center, align-items: center, 还是不行

.rectangle {
  height: 75px;
  width: 75px;
  color:white;
  background-color: rgb(77,77,77);
  border-radius:7px;
  text-align:center;
  vertical-align:middle;
  justify-content:center;
  align-items: center;
}

<div class="rectangle"> 
  Test
</div>

鉴于以下设计元素,我试图在html中包含图像,以便可以使用css过渡(悬停效果)操纵不透明度.

这是我迄今为止的解决方案:http://codepen.io/roachdesign/pen/VeQKJK/

这里的主要缺点是我使用手动垂直居中(绝对/顶部:4​​0%),这在缩小浏览器时变得明显.

在使用绝对定位时,是否可以使用flexbox或table进行垂直居中？

HTML

<div class="badge-container">
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/FF9999">
        <h2><strong>Cumberland</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/99FF99">
        <h2><strong>Dauphin</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9999FF">
        <h2><strong>Lancaster</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400/9F9F99">
        <h2><strong>Lebanon</strong>County</h2>
    </div>
  </a>
  <a href="">
    <div class="badge">
        <img src="http://www.placehold.it/400x400">
        <h2><strong>York</strong>County</h2>
    </div>
  </a>
</div>

SCSS

.badge-container {display:flex; flex-direction:row; 
  .badge {position:relative;}
  h2 {position:absolute;
      top:36%;
      left:0; 
      right:0;
      text-align:center;
      strong {display:block;}
  }
}

img {max-width:100%;}

我想将textarea元素居中，但margin: 0 auto无法正常工作。

我也尝试包装div具有margin: 0 auto样式的元素。

<div style="margin: 0 auto;">
    <textarea rows="4" cols"100"></textare>
</div>