Как разместить текст после значка в CSS?
Я пытаюсь разместить текст после значка, но по какой-то причине текст приклеен к значку, а не под ним.
У меня такой код:
.appbox {
position: relative;
display: flex;
/* align-items:center; */
background-color: rgba(215, 215, 215, 0.6);
width: 110px;
height: 110px;
border-radius: 8px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
text-align: left;
text-decoration: none!important;
color: #555555;
!important
}
.appbox_image {
display: block;
margin-top: 0;
margin-left: auto;
margin-right: auto;
width: 72px;
font-size: 12px;
line-height: 15px;
text-align: left!important;
float: none!important;
clear: both!important;
}
.appbox_text {
display: block;
font-size: 12px;
line-height: 15px;
text-align: left!important;
float: none!important;
clear: both!important;
}<div class = "appbox">
<div class = "appbox_image">
<img src='../images/app-newtext.png'></div>
<div class = "appbox_text">Create a new context and visualise the text inside.</div>
</div>Однако в результате я получаю следующее:
Что нужно изменить, чтобы текст появлялся под изображением и имел не ту же ширину, что и изображение, а немного шире, вписываясь в пространство appbox (но с сохранением заполнения).
Спасибо!
Ответы 1
Вы были почти у цели!
Я изменил ваш css, чтобы изображение и текст отображали inline-block вместо block. HTML изменен незначительно. Я применил css изображения к тегу img и к тексту через тег абзаца, и я поместил оба img и p в один div, и я немного привел в порядок ваш CSS (поместил padding в сокращение и сгруппировал css, который был общим к тексту и изображению вместе).
Альтернативой внутреннему div было бы установить flex-direction во внешнем div css и удалить встроенный блок из app_image / text css. (jsfiddle). Это будет центрировать изображение - было неясно, хотите ли вы изображение слева или по центру. Если вы хотите, чтобы он находился слева, вы всегда можете настроить CSS, чтобы изображение отображалось слева.
Надеюсь это поможет
.appbox {
position: relative;
display: flex;
/*flex-direction:column;*/
float: left;
/* align-items:center; */
background-color: rgba(215, 215, 215, 0.6);
width: 110px;
height: 110px;
border-radius: 8px;
padding: 15px 15px 15px 15px;
/* top, right, bottom, left*/
margin-right: 20px;
margin-bottom: 20px;
text-align: left;
text-decoration: none!important;
color: #555555!important;
}
.appbox_image {
margin-top: 0;
margin-left: auto;
margin-right: auto;
width: 72px;
font-size: 12px;
}
.appbox_image,
.appbox_text {
display: inline-block;
font-size: 12px;
line-height: 15px;
text-align: left;
float: none!important;
clear: both!important;
}<div class = "appbox">
<div>
<img class = "appbox_image" src='../images/app-newtext.png'>
<p class = "appbox_text">Create a new context and visualise the text inside. </p>
</div>
</div>
Можете ли вы попробовать удалить гибкий дисплей .app box?