使用CSS / JQUERY / HTML中心多个响应div [英] Centre Multiple Responsive Divs Using CSS / JQUERY / HTML

问题描述

我刚开始使用html和css，我正在尝试创建一个网站，代码的一部分在这里：

HTML

 < div class =apoios> 
< h7>& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& nbsp; Apoios< / h7> 
< br> 
< div class =thunnb> 
< img alt =src =http://placehold.it/150x150/> 
< / div> 
（...）
< div class =thunnb> 
< img alt =src =http://placehold.it/150x150/> 
< / div> 
  

strong>

  .thunnb {
 float：left; 
 padding：10px; 
 width：150px; 
 height：150px; 
} 
 .apoios img {
 border：1px solid＃; 
 -webkit-border-radius：10px; 
 -moz-border-radius：10px; 
 border-radius：10px; 
} 
 h7 {
 font-size：22px！important; 
 font-family：'Raleway'，sans-serif！important; 
 font-weight：normal！important; 
 margin-bottom：6px！important; 
 color：#FFFFFF！important; 
 margin-top：20px; 
} 
 .apoio {
 display：inline-block; 
} 
  

JSFIDDLE - https://jsfiddle.net/wpswddnq/

我要将 thunnbdivs同时保持响应。基本上它必须在用户适应窗口时始终居中（在同一行中最可能的图像）。

注意：

float：left; 到 display：inline-block; 在 thunnb class。

例如

  .thunnb {
 display：inline-block; 
 padding：10px; 
 width：150px; 
 height：150px; 
} 
  

然后添加文本

例如 strong>

  .apoios {
 text-align：center; 
} 
  

现在可以删除 display：inline-block ; c

JsFiddle链接。

希望它有帮助。

I'm new to html and css and I'm trying to create a website, part of the code is here:

HTML

<div class="apoios">
<h7>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Apoios</h7>
<br>
<div class="thunnb">
    <img alt="" src="http://placehold.it/150x150" />
</div>
(...)
<div class="thunnb">
    <img alt="" src="http://placehold.it/150x150" />
</div>

CSS

.thunnb {
float: left;
padding: 10px;
width: 150px;
height: 150px;
}
.apoios img {
    border:1px solid #;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
h7 {
    font-size:22px !important;
    font-family:'Raleway', sans-serif !important;
    font-weight: normal !important;
    margin-bottom:6px !important;
    color: #FFFFFF !important;
    margin-top: 20px;
}
.apoio {
    display: inline-block;
}

JSFIDDLE - https://jsfiddle.net/wpswddnq/

I want to centre the "thunnb" divs while maintaining it responsive. Basically it must stay centred (with the most possible images in the same row) all the time while the user is adapting the window.

Note: This is for a block in Drupal.

解决方案

Change float: left; to display: inline-block; in thunnb class.

E.g.

.thunnb {
    display: inline-block;
    padding: 10px;
    width: 150px;
    height: 150px;
}

Then add text-align: center; in apoios class.

E.g.

.apoios {
    text-align: center;
}

You can now remove the display: inline-block; in apoios class.

Here's the JsFiddle link.

Hope it helps.

这篇关于使用CSS / JQUERY / HTML中心多个响应div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！