浮動圖像標記之後的文本縮進不正確

我正在嘗試使用集中圖像創建一個簡單的框，然後是標題和文本。像這樣：浮動圖像標記之後的文本縮進不正確

example

.service-box { 
 
    height: 240px; 
 
    width: 360px; 
 
    margin-top: 28px; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    float: left; 
 
    position: relative; 
 
    top: -56px; 
 
    left: 124px; 
 
} 
 

 
.service-box-text { 
 
    border: solid 1px hotpink; 
 
    border-radius: 6px; 
 
    height: 182px; 
 
    padding: 80px 32px 32px 32px; 
 
}

<div class="service-box"> 
 
    <img src="http://placehold.it/112x112"> 
 
    <div class="service-box-text"> 
 
    <h5>HEADING</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
 
    </div> 
 
</div>

我能實現這個施加浮到圖像，但隨後的以下文本被錯誤地縮進（它應該在圖像中居中）。

它應該是簡單，但我無法弄清楚如何讓正確居中的標題。

我該如何解決這個問題，或者我是否以錯誤的方式解決這個問題？

JS Fiddle

來源

2017-06-12 Matthew Hegarty

你需要清除下一個元素的浮動。一旦你這樣做，它的工作就很好。

.service-box-text { 
    border: solid 1px hotpink; 
    border-radius: 6px; 
    height: 182px; 
    padding: 80px 32px 32px 32px; 
    clear: left; 
    }

https://jsfiddle.net/x76v0a8k/3/

絕對定位也將工作，但它並不總是很容易與響應的網頁的工作。

來源

2017-06-12 20:40:04 Josh

這有效，但它也推動整個框下降約60px - 不知道爲什麼這是（你可以比較兩個JS小提琴看到） –

這是因爲你的第一個定位元素是佔位符圖像，它有一個相對從頂部定位，值爲56px。如果要刪除該空間，請從圖像中移除定位屬性，然後將其應用於具有service-box-text類的div。當應用於div時，值應該是「-56px」以創建相同的效果。 – Josh

請看這個小提琴：https：//jsfiddle.net/x76v0a8k/4/ – Josh

而是漂浮和相對定位的，你可以使用絕對定位：

.service-box { 
 
    height: 240px; 
 
    width: 360px; 
 
    margin-top: 28px; 
 
    text-align: center; 
 
} 
 

 
img { 
 
    position: absolute; 
 
    transform: translate(-50%,-50%); 
 
} 
 

 
.service-box-text { 
 
    border: solid 1px hotpink; 
 
    border-radius: 6px; 
 
    height: 182px; 
 
    padding: 80px 32px 32px 32px; 
 
}

<div class="service-box"> 
 
    <img src="http://placehold.it/112x112"> 
 
    <div class="service-box-text"> 
 
    <h5>HEADING</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
 
    </div> 
 
</div>

來源

2017-06-12 20:31:47 j08691

這是最簡單的解決方案，但我發現它並沒有在IE11工作。喬希的答案在我測試過的瀏覽器中有效。 –

使用flexbox可以實現單個容器內部。

.service-box{ 
 
    border: 1px solid black; 
 
    border-radius: 5px; 
 
    width: 300px; 
 
    display:flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 

 
.service-box img{ 
 
    transform: translateY(-50px) rotate(45deg); 
 
    border-radius: 10px; 
 
    width: 100% 
 
    max-width: 112px; 
 
} 
 
.service-box h5{ 
 
    margin: 0; 
 
}

<div class="service-box"> 
 
    <img src="http://placehold.it/112x112"> 
 
    <h5>HEADING</h5> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing</p> 
 
</div>

來源

2017-06-12 20:43:26

浮動圖像標記之後的文本縮進不正確

回答

相關問題