Question

我试图在Bootstrap 3网格位置的帮助下使用Bootstrap 3中的响应式设计，因为你可以看到我使用相同的位置但是由于某种原因图像不会留在文本中。它离左边有点偏。

.ha-bg-parallax {

    background: url(../image/bg.jpg) no-repeat fixed;

    -moz-background-size: cover;

    -o-background-size: cover;

    -webkit-background-size: cover;

    background-size: cover;

    height: 100vh;

    margin: 0 auto;

    width: 100%;

    display: table;

    vertical-align: middle;

}



.ha-bg-parallax .ha-parallax-body {

    display: table-cell;

    vertical-align: middle;

}



.ha-bg-parallax .ha-content-whitecolor {

    font-size: 17px;

    color: #ffffff;

    width: 45%;

    margin: auto;

}



.ha-bg-parallax .ha-diamond-divider-md {

    margin: 15px 0px;

}



.ha-bg-parallax .ha-heading-parallax {

    font-style: italic;

    font-weight: bold;

    text-transform: none;

    color: #ffffff;

    padding-bottom: 0px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



<div class="container-fluid">

        <div class="row">

                <div class="ha-bg-parallax text-center block-marginb-none" data-type="background" data-speed="20">

            <div class="ha-parallax-body">
              <div class="col-md-2 col-md-offset-5">
          <img class="img-circle img-responsive" alt="me" src="http://puu.sh/ndUaw/59e5207430.jpg">



          </div>
          <div class="col-md-2 col-md-offset-5">
                <h1><span class="element"></span></h1>
                <a href="skype:edgaraxe">
                        <i class="fa fa-skype fa-3x"></i></a> <a href="https://keybase.io/edhusky">
											<i class="fa fa-key fa-3x"></i></a> <a href="https://github.com/edgaraxe">
                        <i class="fa fa-github fa-3x"></i> </a> <a href="https://bitbucket.org/edhusky/">
													<i class="fa fa-bitbucket fa-3x"></i></a> <a href="mailto: edhusky94@gmail.com">
                                  <i class="fa fa-envelope fa-3x"></i></a>

										</div>


        </div>


                <div class="ha-parallax-divider-wrapper">

                    <span class="ha-diamond-divider-md img-responsive"></span>

                </div>



            </div>

        </div>

Answer 1

添加此css：

.img-responsive {
    margin: auto;
}

Bootstraps .img-responsive样式定义为

display: block;
max-width: 100%;
height: auto;

margin: auto解决了风格中缺乏中心问题的问题。

Answer 2

您可以在图片中添加Private Sub Worksheet_Change(ByVal Target As Range) If Not Intersect(Target, Range("b13:r14")) Is Nothing Then 'get oldValue Dim sNewVal As String, sOldVal As String sNewValue = Target.Value 'store current or "new" value since this is what is stored after the cell change takes place With Application .EnableEvents = False 'turns off event firing so the code will not go into endless loop .Undo 'undo the change (to store old value in next line) End With sOldValue = Target.Value 'store old value Target.Value = sNewValue 'reset new value Dim lCol As Long lCol = Target.Column 'which column of data was changed 'assumes columns A-Q are 17 columns Me.Range(Me.Cells(Target.Row, 1), Me.Cells(Target.Row, 17)).Copy With Sheets("Audit Trail") Dim lRow As Long lRow = .Range("B" & .Rows.Count).End(xlUp).Offset(1).Row .Range("B" & lRow).PasteSpecial xlPasteValues .Range("B" & lRow + 1).PasteSpecial xlPasteValues .Range("A" & lRow).Value = Now .Cells(lRow, lCol + 1).Value = sOldValue 'store old value in first pasted line ... add 1 since starting from column B End With End If Application.EnableEvents = True End Sub，使其在div中居中。这应该可以让你保持在图标上方居中的效果。

我添加了margin: auto;。见编辑版。

＆＃13;

img.img-circle.img-responsive { margin: auto; }

＆＃13;

img.img-circle.img-responsive { margin: auto; }

.ha-bg-parallax {

    background: url(../image/bg.jpg) no-repeat fixed;

    -moz-background-size: cover;

    -o-background-size: cover;

    -webkit-background-size: cover;

    background-size: cover;

    height: 100vh;

    margin: 0 auto;

    width: 100%;

    display: table;

    vertical-align: middle;

}



.ha-bg-parallax .ha-parallax-body {

    display: table-cell;

    vertical-align: middle;

}



.ha-bg-parallax .ha-content-whitecolor {

    font-size: 17px;

    color: #ffffff;

    width: 45%;

    margin: auto;

}



.ha-bg-parallax .ha-diamond-divider-md {

    margin: 15px 0px;

}



.ha-bg-parallax .ha-heading-parallax {

    font-style: italic;

    font-weight: bold;

    text-transform: none;

    color: #ffffff;

    padding-bottom: 0px;

}

＆＃13;

定位正确的内容Bootstrap网格

2 个答案: