图片上的文字居中 Chrome/Firefox 但不是 Safari

Question

我有一个页面，其文本居中于不透明图像之上。悬停时，文本和不透明度消失，显示清晰的图像。在 Chrome 和 Firefox 中，文本在图像上居中，但在 Safari 中它是偏移的。

Chrome/Firefox:

野生动物园：

html:
<html>
    <head>

    <title>Navabar Test</title>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <link rel="stylesheet" href="texthover_test.css">

</head>

<body>

    <!--Toolbar-->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">

            <!--Collapse Button-->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!--Tabs-->
            <div class="collapse navbar-collapse" id="example">
                <ul class="nav navbar-nav">
                    <li>
              <a href="1" style="text-decoration: none">
                <button type="button" class="btn btn-default">
                  Home
                </button>
              </a>
                    </li>
                    <li>
                        <a href="1" style="text-decoration: none">
                <button type="button" class="btn btn-default">
                  Condominii
                </button>
              </a>
                    </li>
                    <li>
                        <a href="1" style="text-decoration: none">
                <button type="button" class="btn btn-default">
                  Fornitori
                </button>
              </a>
                    </li>
                    <li>
                        <a href="1" style="text-decoration: none">
                <button type="button" class="btn btn-default">
                  Chi Siamo
                </button>
              </a>
                    </li>
                    <li>
              <a href="1" style="text-decoration: none">
                <button type="button" class="btn btn-default">
                  Dove Siamo
                </button>
              </a>
            </li>
            <li>
              <a href="1" style="text-decoration: none">
                <button type="button" class="btn btn-default">
                  Contatti
                </button>
              </a>
            </li>
                </ul>
            </div><!--collapse-->   

        </div><!--container-->
    </div><!--navbar-->


        <!--Foto Condominii-->
  <div class="content">
    <div class="container">

      <!--Row 1-->
      <div class="row">
        <div class="pic col-md-4">
          <img src="http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png"  width="360" height="240"/>
        <span class="address">Via Bassini 27</span>
      </div>
      <div class="pic col-md-4">
        <img src="http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png" width="360" height="240"/>
        <span class="address">Via Bassini 35</span>
      </div>
      <div class="pic col-md-4">
        <img src="http://blog.burnsfilmcenter.org/wp-content/uploads/2012/09/Samsara2.png" width="360" height="240"/>
        <span class="address">Via Beruto 7</span>
      </div>
    </div>

        </div><!--container-->
    </div><!--content-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>

css:

 body {
 background-color: #f7f7f7;
 font-family: 'Raleway', sans-serif;
 }

.navbar{
text-align: center;
background: #FFFFFF
}

.nav .btn{
font-family: 'Raleway', sans-serif;
color: #5a5a5a;
font-size: 14px;
text-transform: uppercase;
}

.btn{
letter-spacing: 1px;
}

.btn-default {
border: none;
padding: 10px 15px

}

.btn-default:hover,{
background: #C4C4C4;
color: #737373;
}

h1, p {
margin: 0;
padding: 0 0 .5em;

}

.content{
margin-top: 80px;
}

/*Address 1*/
.pic{
 display: inline-block;
 margin-bottom: 20px;
 position:relative;
}   
.pic img{
 display: block;
 min-width: 100%;
 max-width: 100%;
 opacity: 0.2;
 transition: opacity 0.5s ease;
 }   
 .address{
 text-align: center;
 font-family: 'Raleway', sans-serif;
 font-size: 40px;
 color: #626262;
 font-weight: 100;
 opacity: 1;
 position:absolute;
 top:50%;
 left: 50%;
 transform:translate(-50%,-50%);
 transition: opacity 0.5s ease;
 }   
.pic:hover img {
 opacity: 1;
 }   
.pic:hover .address{
 opacity: 0;
 }

Answer 1

您缺少 CSS3 属性 transform 的供应商前缀。在这种情况下 -webkit-transform 缺失。

将您的 .address 定义更改为：

    .address {
        text-align: center;
        font-family: 'Raleway', sans-serif;
        font-size: 40px;
        color: #626262;
        font-weight: 100;
        opacity: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        -moz-transition: opacity 0.5s ease;
        -o-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
    }

图片上的文字居中 Chrome/Firefox 但不是 Safari

Text over image centered in Chrome/Firefox but not Safari

html

css

safari

google-chrome

twitter-bootstrap