不固定的响应式设计样式答案

【问题标题】：Unfixed Responsive design styling不固定的响应式设计样式
【发布时间】：2016-01-17 14:59:17
【问题描述】：

更新！！！

每次在横向屏幕设备上查看页面时，我仍然面临同样的错误。

CSS：

f5 {
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
}

关于我们

<div class="containerpreview">
    <br>
         <f5>Check out our products</f5>
    <br>
         <f6>and Experience no-frills delivery</f6>
    <div style="margin-top:40px">
        <div class="buttoneshop"><a href="...">Eshop</a></div>
    </div>
</div>

有没有办法让两者之间的间距更近？当我发出命令时

text-transform: uppercase;

间距很好。

除此之外，有没有办法使href下的src内的图像居中？

css

.images_1_of_4 img {
    max-width: 100%;
    <!-- height: 200px; -->
    width: 200px;
    align: middle;
}

.img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
 }
.grid_preview {
    height: 200px;
}

shop.php

<div class="grid_1_of_4 images_1_of_4">
    <div class="grid_preview">
        <a href="..."><img src="..." alt=""></a>
    </div>
</div>

【问题讨论】：

你可能有这个设置text-align: justify; 设置它为text-align: left;
很好，@Vallentin
不工作。其实我忘了补充。当我 rwd 时它不起作用@Vallentin

标签： css image alignment href src

【解决方案1】：

尝试将对齐方式 text-align : justify; 更改为 text-align : left。

或者，如果这不是你喜欢做的，letter-spacing 是一个 CSS 属性来改变字符之间的空间，word-spacing 是改变单词之间的空间

【讨论】：

不工作。其实我忘了补充。当我 rwd 时它不起作用

【解决方案2】：

正如其他用户建议的那样，考虑使用text-align : left 强制在左侧对齐，您可能在包装元素上设置了text-align : justify;，或者在css 的另一部分设置了text-align : justify;，如下面的示例所示。

https://jsfiddle.net/s5p9872t/

.f5 {
   text-align : justify;
    width: 250px;
}

.f5 {
    text-transform: uppercase;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
}

【讨论】：

不工作。其实我忘了补充。当我 rwd 时它不起作用