如何使用css显示移动设备中的图像和文本？
如何使用css显示移动设备中的图像和文本？
提问于 2017-01-17 14:31:55
我可以在桌面上的同一行显示图像和文本，但在移动设备中，它不显示在相同的line.It中显示图像和下面的文本。我必须把两者都显示在同一行中。你能帮我解决这个问题吗？
下图：-我在移动设备上得到这样的输出。
输出:我必须同时在桌面上显示相同的line.like
.amazon-section{
text-align:center;
background-color: #fff;
display: table;
margin: 0px auto 0px auto;
padding: 0px 38px 5px;
border-radius: 04px;
webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
position: relative;
top: 20px;
font-family:"Arcon-Regular";
box-sizing: border-box;
}
.amazon-section img{
width:100px;
padding:10px;
position: relative;
right: 20px;
}
.amazon-content{
display:inline-block;
}
.amazon-content h2{
font-size:18px;
color:#53585F !important;
font-weight: 600;
position: relative;
top: 15px;
} <div class="amazon-section">
<div class="amazon">
<img src="images/amazon.png">
<div class="amazon-content">
<h2 class="amazon-text">Lorem ipsum dolor tetur<br /> adipiscing elit.</h2>
</div>
</div>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-01-17 15:00:17
您可以使用挠曲箱完成此操作，并使您的html更干净、更简洁。
基本上，您可以轻松地控制以justify-content (水平或主轴)和align-items (垂直或交叉轴)对中的垂直和水平中心，您可以直接在容器/父轴上设置它们。
.amazon-section
{
text-align:center;
background-color: #fff;
display: table;
margin: 0px auto 0px auto;
padding: 0px 38px 5px;
border-radius: 04px;
webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
position: relative;
top: 20px;
font-family:"Arcon-Regular";
box-sizing: border-box;
}
.amazon { /*set children to be centered vertically and horizontally*/
display: flex;
justify-content:center;
align-items:center;
}
.amazon-section img /*children need no positional css*/
{
width:100px;
padding:10px;
}
.amazon-content h2
{
font-size:18px;
color:#53585F !important;
font-weight: 600;
}代码示例
Stack Overflow用户
发布于 2017-01-17 14:46:08
这段CSS将隐藏所有直接嵌套在浏览器宽度低于768 in的<br>元素中的<h2>元素。在这种情况下，实现你的目标，正如我所理解的。
@media (max-width: 767px) {
h2 > br { display: none; }
}更新
我原本以为这是你第一行想要的文本本身。
为了保持图像沿文本，我建议使用CSS3 3的flex。例如：
.amazon {
display: flex;
align-items: center; /* <- Helps with vertical alignment */
}您还可以指定默认情况下希望每个子代占用多少水平比例，以及是否希望允许它们缩小或增长，等等。
Stack Overflow用户
发布于 2017-01-17 14:39:47
.amazon-section
{
text-align:center;
background-color: #fff;
display: table;
margin: 0px auto 0px auto;
padding: 0px 38px 5px;
border-radius: 04px;
webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
position: relative;
top: 20px;
font-family:"Arcon-Regular";
box-sizing: border-box;
}
.amazon-section > img
{
width:100px;
padding:10px;
position: relative;
right: 20px;
}
.amazon{
vertical-align:top;
display:inline-block;
}
.amazon-content
{
display:inline-block;
}
.amazon-content > h2
{
vertical-align:top;
font-size:18px;
color:#53585F !important;
font-weight: 600;
position: relative;
} <div class="amazon-section">
<div class="amazon">
<img src="images/amazon.png">
<div class="amazon-content">
<h2 class="amazon-text">Lorem ipsum dolor tetur adipiscing elit.</h2>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41699759
复制相关文章
相似问题
腾讯云开发者
