如何在父div中对齐文本

时间:2019-03-13 12:04:43

标签: css

所以我有课:

awpcp-subtitle. 

在此我想定位一个子元素,我可以使用它:

 @media (max-width: 1920px) and (min-width: 769px) {
       .awpcp-subtitle:nth-of-type(1) {
           margin-top: 440px!Important;
       }
 }

这使我可以上下移动它。但是我想使当前浮动的文本对齐:

@media (max-width: 1920px) and (min-width: 769px) {
       .awpcp-subtitle:nth-of-type(1) {
            text-align: center!Important;
       }
}

不起作用。

有什么想法吗?

这是html:

<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard- 
2/awpcp-reply-to-ad/21/old-goriot-balzac/">Email 
admin</a><a href="tel:<br/><label>Phone:</label> 
07576335122"><div class="phone"><br/><label>Phone: 
</label> 07576335122</div> </a>
<a href="http://maps.google.com/?q=:<br/>. 
<label>Location:</label> Westminster, London, UK"><div 
class="location"><br/><label>Location:</label> 
Westminster, London, UK</div></a>           
<div class="visit-website"><Visit Website:</div>                            
</div>
<div class="showawpcpadpage"><label>Price:</label> 
<strong>£ 0.99</strong></div>

                            <div class="fixfloat"></div>

                            <div class="showawpcpadpage">
                                <div class="awpcp-subtitle">More Information</div>

1 个答案:

答案 0 :(得分:0)

基本上,通过提供的链接查看页面代码后,这是重新排列HTML元素顺序的简单情况。

在div部分-showawpcpadpage部分中,您需要将awpcp副标题[联系信息]移到顶部,而不是在图像+链接下方。

<div class="showawpcpadpage">
<div class="awpcp-subtitle">Contact Information</div>
<div class="awpcp-ad-primary-image">
<a class="awpcp-listing-primary-image-thickbox-link thickbox thumbnail" href="https://adsler.co.uk/wp-content/uploads/awpcp/images/19808423-2b60d824-large.jpg" rel="awpcp-gallery-21">
    <img class="thumbshow" src="https://adsler.co.uk/wp-content/uploads/awpcp/thumbs/19808423-2b60d824-primary.jpg" alt="Thumbnail for the listing's main image" width="200" height="200">
</a>

这就是HTML流的外观。

HTML的布局很重要。因此,例如,如果标头位于页面顶部,则标头的HTML也应位于页面顶部,而不是向下几个元素。