Question

我有这个演示https://jsfiddle.net/447cv32f/。我想把这个圆圈和文字居中。有任何建议怎么做？

<div class="public_profile">
    <div class="profile_image business">
        <img src="img/realestate_icon.png" />
    </div>
    <h4>BUSINESS ACCOUNT</h4>
    <h3>Sunny Real Estate Sarl.</h3>
    <hr class="business_line" />
    <h5>VERIFIED USER</h5>
    <h5 class="registered">Registered on January 27th 2016</h5>
</div>

Answer 1

用div包裹文本并将flex样式移动到.public_profile容器

＆＃13;

.public_profile {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
}
.public_profile .profile_image {
  border-radius: 50%;
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 15px;
  overflow: hidden;
}
.public_profile .profile_image.business {
  background-color: #fdb902;
}
.public_profile .profile_image img {
  width: 100%;
  height: 100%;
}
.public_profile h4 {
  font-family: 'OpenSans-ExtraBold';
  font-size: 12px;
  color: #a1d15f;
  margin: 0;
}
.public_profile h3 {
  font-family: 'OpenSans-Light';
  font-size: 24px;
  color: #1e1e1e;
  margin: 0;
}
.public_profile h5 {
  font-family: 'OpenSans-Regular';
  font-size: 12px;
  color: #4d5663;
  margin: 0;
}
.public_profile h5.registered {
  font-size: 11px;
  color: #4c4d4d;
}
hr.business_line {
  margin-top: 0;
  margin-bottom: 0;
  width: 30px;
  display: inline-block;
  border-top: 2px solid #a1d15f;
}

＆＃13;

<div class="public_profile">
  <div class="profile_image business">
    <img src="img/realestate_icon.png" />
  </div>
  <div>

    <h4>BUSINESS ACCOUNT</h4>
    <h3>Sunny Real Estate Sarl.</h3>
    <hr class="business_line" />
    <h5>VERIFIED USER</h5>
    <h5 class="registered">Registered on January 27th 2016</h5>
  </div>
</div>

＆＃13;

Answer 2

（编辑版:)

https://jsfiddle.net/up7n90fc/

在所有文本周围放置一个包装器，将其内容元素定义为块元素并将它们居中：

<div class="public_profile">
    <div class="profile_image business">
        <img src="img/realestate_icon.png" />
    </div>
    <div class="wrap1">
      <h4>BUSINESS ACCOUNT</h4>
      <h3>Sunny Real Estate Sarl.</h3>
      <hr class="business_line" />
      <h5>VERIFIED USER</h5>
      <h5 class="registered">Registered on January 27th 2016</h5>
    </div>
</div>

CSS：

.wrap1 {
  text-align: center;
}
.wrap1 > * {
  display: block;
}

（您可以为包装器添加宽度）

Answer 3

使用display:inline-block取另一个元素，并通过将text-align：center赋予包裹（public_profile）使其居中。

例如：

html

<div class="public_profile">
  <div class="center">
    <div class="profile_image business">
      <img src="img/realestate_icon.png" />
    </div>
    <h4>BUSINESS ACCOUNT</h4>
    <h3>Sunny Real Estate Sarl.</h3>
    <hr class="business_line" />
    <h5>VERIFIED USER</h5>
    <h5 class="registered">Registered on January 27th 2016</h5>
  </div>

</div>

CSS

.center {
    overflow: hidden;
    width: 400px;
    text-align: left;
    display: inline-block;
}

小提琴here

Answer 4

在圈子旁边的文字周围添加一个容器div，然后提供父容器display:flex，align-items:center和justify-content:center

即。 HTML

<div class="public_profile">
  <div class="profile_image business">
    <img src="img/realestate_icon.png" />
  </div>
  <div class="profile-container">
    <h4>BUSINESS ACCOUNT</h4>
    <h3>Sunny Real Estate Sarl.</h3>
    <hr class="business_line" />
    <h5>VERIFIED USER</h5>
    <h5 class="registered">Registered on January 27th 2016</h5>
  </div>
</div>

CSS

.public_profile{
    float: left;
    width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:solid 1px red;
}

.public_profile .profile-container {
  border:solid 1px green;
}

.public_profile .profile_image{
    border-radius: 50%;
    float: left;
    width: 120px;
    height: 120px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    overflow: hidden;
}
.public_profile .profile_image.business{
    background-color: #fdb902;
}
.public_profile .profile_image img{
    width: 100%;
    height: 100%;
}
.public_profile h4{
    font-family: 'OpenSans-ExtraBold';
    font-size: 12px;
    color: #a1d15f;
    margin: 0;
}
.public_profile h3{
    font-family: 'OpenSans-Light';
    font-size: 24px;
    color: #1e1e1e;
    margin: 0;
}
.public_profile h5{
    font-family: 'OpenSans-Regular';
    font-size: 12px;
    color: #4d5663;
    margin: 0;
}
.public_profile h5.registered{
    font-size: 11px;
    color: #4c4d4d;
}
hr.business_line{
    margin-top: 0;
    margin-bottom: 0;
    width: 30px;
    display: inline-block;
    border-top: 2px solid #a1d15f;
}

（注意：边框纯粹用于显示目的）

Fiddle example

编辑：好的，所以我稍微误解了，我也将文本垂直居中放在圆圈旁边以及水平居中的所有内容，容器中的align-items:center垂直居中所有内容，水平justify-content:center以它为中心，只需使用哪一个解决你的问题：）

Answer 5

试试这个：

shared_helpers.rb:78: warning: Insecure world writable dir /opt/android-sdk/tools in PATH, mode 040777
rake aborted!
Gem::LoadError: You have already activated rake 11.1.2, but your Gemfile requires rake 11.1.1. Prepending `bundle exec` to your command may solve this.
/home/.rvm/gems/ruby-2.2.3/gems/bundler-1.11.2/lib/bundler/runtime.rb:34:in `block in setup'
/home/.rvm/gems/ruby-2.2.3/gems/bundler-1.11.2/lib/bundler/runtime.rb:19:in `setup'
/home/.rvm/gems/ruby-2.2.3/gems/bundler-1.11.2/lib/bundler.rb:92:in `setup'
/home/.rvm/gems/ruby-2.2.3/gems/bundler-1.11.2/lib/bundler/setup.rb:8:in `<top (required)>'
/home/examples/demo_app/config/boot.rb:3:in `<top (required)>'
/home/examples/demo_app/config/application.rb:1:in `<top (required)>'
/home/examples/demo_app/Rakefile:4:in `<top (required)>'
LoadError: cannot load such file -- bundler/setup
/home/examples/demo_app/config/boot.rb:3:in `<top (required)>'
/home/examples/demo_app/config/application.rb:1:in `<top (required)>'
/home/examples/demo_app/Rakefile:4:in `<top (required)>'
(See full trace by running task with --trace)

如何将图像旁边的文字居中？

5 个答案: