这个文字如何居中垂直？

时间：2018-02-05 07:27:45

标签： html css text flexbox alignment

HTML：

<section class="zdjecia">
    <div class="row">
        <div class="col span-1-of-2">
            <div class="box-foto2">
                <div class="box-foto2-content">
                    <div class="text1-wrapper">
                        <div class="text1-padding">
                            <h5>PROFESJONALIZM</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col span-1-of-2">
            <div class="box-foto1"></div>
        </div>
    </div>    
</section>

CSS：

.box-foto1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/fryz1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.box-foto1:before {
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
    vertical-align: middle;
}

.box-foto2 {
    background-color: #f4f4f4 ;
    position: relative;
    width: 100%;
}

.box-foto2:before {
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.box-foto2-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.text1-wrapper {
    display: flex;
    align-items: center;
}

h5 {
    font-size: 320%;
    font-family: 'Oswald';
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 6px;
    color: #444;
    word-wrap: break-word;
}

我想在此文本中间垂直对齐。我不能用

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

因为我使用它时文本没有换行。 我试图使用vertical-align但是没有用。 我该怎么办？

4 个答案:

答案 0 :(得分：1)

请尝试使用 text1-wrapper 类。

.text1-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

答案 1 :(得分：0)

您可以使用行高，然后使用文本对齐中心。这是代码

＆＃13;
＆＃13; 
.box-foto1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/fryz1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.box-foto1:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
    vertical-align: middle;
}

.box-foto2 {
    background-color: #f4f4f4 ;
    position: relative;
    width: 100%;
    line-height:350px;
    text-align:center;
    
}

.box-foto2:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.box-foto2-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
＆＃13; 
<section class="zdjecia">
        <div class="row">
            <div class="col span-1-of-2">
                <div class="box-foto2">
                    <div class="box-foto2-content">
                        <div class="text1-wrapper">
                            <div class="text1-padding">
                                <h5>PROFESJONALIZM</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col span-1-of-2">
                <div class="box-foto1"></div>
            </div>
        </div>

    </section>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

插入此代码： 

.box-foto1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(img/fryz1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    width: 100%;
}

.box-foto1:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
    vertical-align: middle;
}

.box-foto2 {
    background-color: #f4f4f4 ;
    position: relative;
    width: 100%;
}

.box-foto2:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.box-foto2-content {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.text1-wrapper {
    display: flex;
    align-items: center;
    margin: 0 auto;
}





h5 {
    font-size: 320%;
    font-family: 'Oswald';
    font-weight: 500;
    line-height: 42px;
    letter-spacing: 6px;
    color: #444;
    word-wrap: break-word;
}

＆＃13;
＆＃13; 
<section class="zdjecia">
        <div class="row">
            <div class="col span-1-of-2">
                <div class="box-foto2">
                    <div class="box-foto2-content">
                        <div class="text1-wrapper">
                            <div class="text1-padding">
                                <h5>PROFESJONALIZM</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col span-1-of-2">
                <div class="box-foto1"></div>
            </div>
        </div>

    </section>
＆＃13; 
<label>Value 1&nbsp;<input name='checkme[]' type='checkbox' value='1'></label><br>
<label>Value 2&nbsp;<input name='checkme[]' type='checkbox' value='2'></label><br>
<label>Value 3&nbsp;<input name='checkme[]' type='checkbox' value='3'></label><br>
<label>Value 4&nbsp;<input name='checkme[]' type='checkbox' value='4'></label><br>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_form" >Open Sesame</button>

 <div class="modal fade" id="modal_form" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Update Departemen</h4>
            </div>
              <form action="#" id="form" class="form-horizontal">
            <div class="modal-body form">
                <input type="hidden" value="" name="emp_id"/>
                  <div class="form-body">

                      <div class="form-group">
                        <label class="control-label col-md-3">Departemen</label>
                        <div class="col-md-9">
                          <select name="dept_id_auto" class="form-control pull-right">
                          </select>
                        </div>
                      </div>

                      <div class="form-group">
                        <label class="control-label col-md-3">* This is supposed to be hidden value</label>
                        <div class="col-md-9">
                        <input name='list_check'>
                        </div>
                      </div>

                  </div>
            </div>
            <div class="modal-footer">
              <button type="submit" id="btnSave" class="btn btn-primary">Save</button>
              <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
            </div>
              </form>

          </div>

        </div>
      </div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

由于您使用的是flex属性，因此应将text1-wrapper类修改为

       .text1-wrapper {
            display: flex;
            justify-content: center;
}
相关问题
最新问题