圖像浮動左側的居中文本，然後所有浮動刪除移動顯示

Question

只是似乎無法得到這個工作！

我想要一個圖像向左浮動，而其右側的文本要在剩餘空間中居中。

而對於較小的顯示器< 480px，圖像不再浮動，被居中和較小（100px） - 並且文本要在下面一行中居中。

This image should illustrate

<div class="quiztopheader"> 
    <div class="quiztopimage"><img src="myimage.jpg" /></div> 
    <div class="quiztitle"><u>This is the line 1</u> 
     <br/><div class="quizsubtitle">And this is line 2 not underlined</div> 
    </div> 
</div> 

的CSS：

.quiztopheader { 
    display:inline-block; 
    width: 100%; 
} 

.quiztopimage{ 
    padding: 10px 25px 0px 5px; 
    float: left; 
    min-width:150px; 
    width:150px;  
} 

.quiztitle { 
    font-size: 30px; 
    text-align: center; 
    padding: 0px 0px 25px 0px; 
    margin: 0px 0px 0px 150px; 

    width: (100%-150px); 

    float:center; 
} 
.quizsubtitle { 
    font-size: 20px; 
    margin: 10px 0 0 0; 
} 

@media only screen and (max-width: 480px) { 

    .quiztopheader { 
     width: 100%; 
     display: block; 
     overflow: auto; 
    } 
    .quiztopimage { 
     width:100%; 
     clear: left; 
     clear: center; 
     text-align: center; 
    } 
    .quiztitle { 
     text-align: center; 
     font-size: 24px; 

    } 
    .quizsubtitle{ 
     width:100%; 
     text-align: center; 
     font-size: 18px;   
    } 
} 

Answer 1

當調整到您需要刪除quiztitle左邊距更小的屏幕，因爲這是防止文本被完全居中。

.quiztitle { 
    text-align: center; 
    font-size: 24px; 
    margin: 0; 
    } 

Codepen

.quiztopheader { 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.quiztopimage { 
 
    padding: 10px 25px 0px 5px; 
 
    float: left; 
 
    min-width: 150px; 
 
    width: 150px; 
 
} 
 

 
.quiztitle { 
 
    font-size: 30px; 
 
    text-align: center; 
 
    padding: 0px 0px 25px 0px; 
 
    margin: 0px 0px 0px 150px; 
 
    width: (100%-150px); 
 
    float: center; 
 
} 
 

 
.quizsubtitle { 
 
    font-size: 20px; 
 
    margin: 10px 0 0 0; 
 
} 
 

 
@media only screen and (max-width: 480px) { 
 
    .quiztopheader { 
 
    width: 100%; 
 
    display: block; 
 
    overflow: auto; 
 
    } 
 
    .quiztopimage { 
 
    width: 100%; 
 
    clear: left; 
 
    clear: center; 
 
    text-align: center; 
 
    padding-left: 0; 
 
    padding-right: 0; 
 
    } 
 
    .quiztitle { 
 
    text-align: center; 
 
    font-size: 24px; 
 
    margin: 0; 
 
    } 
 
    .quizsubtitle { 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    } 
 
}

<div class="quiztopheader"> 
 
    <div class="quiztopimage"><img src="http://placehold.it/150x150" /></div> 
 
    <div class="quiztitle"><u>This is the line 1</u> 
 
    <br/> 
 
    <div class="quizsubtitle">And this is line 2 not underlined</div> 
 
    </div> 
 
</div>