如何將徽標放置在背景圖片的中心？

-1

我想把logo放在背景圖片的中央。我試圖通過增加margin.But，但是當我調整小尺寸的屏幕時，它創造了額外的空間。我認爲這不是正確的方式。請幫助我解決這個問題。如何將徽標放置在背景圖片的中心？

HTML：

<div class="details-section section"> 
     <div class="container-fluid"> 
      <div class="equal row"> 
       <div class="big-small"> 
        <div class="big col-sm-8"> 
         <img src="images/logo.png" alt="Vintage bike" class="img-responsive center-block"/> 
        </div> 
        <div class="small col-sm-4"></div> 
       </div> 
       <div class="small-big"></div> 
       <div class="big-small-big"></div> 
      </div> 
     </div> 
    </div>

CSS：

.details-section .big { 
    background: url("images/vintage-bike.jpg") no-repeat 0 0/cover; 
} 
.details-section .big img { 
    width: 92px; 
    margin: 180px auto; 
}

在這裏，我修改過代碼的工作小提琴。

Working Demo

來源

2015-08-19 Tanvir Rahman

完整代碼的兄弟嗎？你的代碼中缺少一些東西。 – Fiido93

你可以創建一個演示，這將很容易讓其他人來幫助你嗎？ –

不完整的代碼....只是主要部分... @Fiido –

第一版居中對齊：

.details-section .big{ 
    position: relative; 
    background: #f5f5f5; 
} 
.details-section .big img{ 
    position: absolute; 
    display: block; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%); 
}

第二個版本，它的工作原理，只有固定的容器高度，但有時有用：

.details-section .big{ 
    height: 150px; // Change if need 
    background: #f5f5f5; 
    text-align: center; 
} 
.details-section .big:after{ 
    content: ""; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.details-section .big img{ 
    display: inline-block; 
    vertical-align: middle; 
}

http://jsfiddle.net/7o8bndtv/

來源

2015-08-19 05:49:33 KZee

如果你設置了一個背景圖像，它會被剪切。如果你修復了背景圖像，它將不會保持響應高度和寬度。但是，至少我要接近解決方案。 –

您不需要首先在版本和高度中都固定寬度。所以這不會影響責任，首先設置容器。 – KZee

請在div添加類文本中心含IMG，使圖像verticla在div

<div class="big col-sm-8 text-center myclass"> 
    <img src="images/logo.png" alt="Vintage bike" class="img-responsive center-block"/> 
</div>

CSS

.myclass { 
    float:none; 
    display:inline-block; 
    vertical-align:middle; 
}

來源

2015-08-19 05:07:51 Mehar

它不會工作。文本中心將標誌放置在水平中心。不垂直。 –

刪除邊距：180px自動;從你的css – Mehar

我做到了。並放置了文本中心class.It不工作。 –

如何將徽標放置在背景圖片的中心？

回答

相關問題