CSS中的容器和div

时间：2017-06-06 11:16:43

标签： css containers

美好的一天， 我不是CSS或DIV的新手，但已经脱离了足够长的时间。尝试使用容器和嵌套的DIV，但没有在我正在尝试做的事情上取得很大成功。已经在SO和Goog上搜索过了，但希望你能帮助我。

以下是我希望实现的目标。

Screenshot of the layout

这就是我到目前为止所做的...... 

.dealsglobal {
    width: 45%;
    display: inline-block;
    float: left;
    margin-right:20px;
    height: auto;
    overflow: auto;
}

.dealsglobal h2 {
    margin-left: 10px;
}

.dealsindia {
    width: 45%;
    height: auto;
    overflow: auto;
}

.dealsindia h2 {
    margin-left: 10px;
}

.dealsleft {
    margin: 0px 25px 10px 0px;
    padding: 5px;
    border: 1px solid #ccc;
    height: auto;
    position: relative;
    width: 40%;
    float: left;
    display: inline-block;
    overflow: auto;
}

.dealsleft img {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

.dealsright {
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    height: auto;
    position: relative;
    width: 40%;
    display: inline-block;
    overflow: auto;
}
<div class="dealsglobal">
<h2>Global Coupons</h2>
    <div class="dealsleft">
	<img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" />
    </div>
    <div class="dealsright">
    Test
    </div>
</div>

<div class="dealsindia">
<h2>Indian Coupons</h2>
    <div class="dealsleft">
    Test
    </div>
    <div class="dealsright">
	Test
    </div>
</div>

无论我做什么，图像都不会居中。我相信，在某个地方，我已将该属性设置为左对齐或其他东西。谁能指点我正确的方向？谢谢你的帮助！

6 个答案:

答案 0 :(得分：0)

您错过了添加此css属性：

.dealsleft {
   text-align:center;
}

答案 1 :(得分：0)

您可能正在寻找以下任何一项：

parentSelector {
  display: block; /* can also be an inline-block, with set width */
  text-align: center;
}
childSelector {
  width: 60%; /* generic. Change it */
  display: block;
  margin: 0 auto;
}

......或：

parentSelector {
  display: flex;
  flex-direction: column;
  align-items: center;
}
childSelector {
  max-width: 60%;    /* optional. Change it. 
                      * You don't need to set width here and, 
                      * it's OK not to limit max-width, either
                      */
}

答案 2 :(得分：0)

我稍微更改了你的代码，但你会明白：

这是html：

<form method="post" action="/controllers/login.controller.js">

这是css：

<div class="container">
  <div class="left">
    <h2 class="inner-text">title</h2>
    <div class="image">
      <img src="http://via.placeholder.com/350x150" />
    </div>
    <h5 class="inner-text">description</h5>
  </div>

  <div class="right">
    <h2 class="inner-text">title</h2>
    <div class="image">
      <img src="http://via.placeholder.com/350x150" />
    </div>
    <h5 class="inner-text">description</h5>
  </div>
  <div style="clear: both" />
</div>

Check here jsfiddle.

答案 3 :(得分：0)

您可以使用div将元素置于text-align:center;内的所有文字元素，例如：h1, p, h2, a等。将img或div居中在另一个div内，您可以使用margin: 0 auto; auto是使left和right页边距居中的重要部分。

更多信息here

我已更新了您的代码段。

＆＃13;
＆＃13; 
.dealsglobal {
    width: 45%;
    display: inline-block;
    float: left;
    margin-right:20px;
    height: auto;
    overflow: auto;
}

.dealsglobal h2 {
    margin-left: 10px;
}

.dealsindia {
    width: 45%;
    height: auto;
    overflow: auto;
}

.dealsindia h2 {
    margin-left: 10px;
}

.dealsleft {
    margin: 0px 25px 10px 0px;
    padding: 5px;
    border: 1px solid #ccc;
    height: auto;
    position: relative;
    width: 40%;
    float: left;
    display: inline-block;
    overflow: auto;
    text-align: center;
}

.dealsleft img {
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    margin: 5px auto;
    width: 100px;
}

.dealsright {
    margin-bottom: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    height: auto;
    position: relative;
    width: 40%;
    display: inline-block;
    overflow: auto;
    text-align: center;
}
＆＃13; 
<div class="dealsglobal">
<h2>Global Coupons</h2>
    <div class="dealsleft">
	<img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" />
    </div>
    <div class="dealsright">
    Test
    </div>
</div>

<div class="dealsindia">
<h2>Indian Coupons</h2>
    <div class="dealsleft">
    Test
    </div>
    <div class="dealsright">
	Test
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

我添加了背景颜色以用于可视化目的。

* {
  box-sizing: border-box;
}

#container {
  width: 100%;
  padding: 10px;
  background-color: red;
  display: flex;
  justify-content: space-between;
}

.subcontainer-outer {
  width: 49%;
  background-color: green;
}

.subcontainer {
  width: 100%;
  background-color: blue;
  display: flex;
  justify-content: space-between;
}

.content {
  width: 45%;
  text-align: center;
  background-color: yellow;
}
<h3>Container</h3>
<div id="container">
  <div class="subcontainer-outer">
    <h4>Sub container 1</h4>
    <div class="subcontainer">
      <div class="content">
        <img src="http://placehold.it/100" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="content">
        <img src="http://placehold.it/100" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
  <div class="subcontainer-outer">
    <h4>Sub container 2</h4>
    <div class="subcontainer">
      <div class="content">
        <img src="http://placehold.it/100" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="content">
        <img src="http://placehold.it/100" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

答案 5 :(得分：0)

您可以在示例下方使用flex作为您的要求。 

.dealsglobal {
  width: 48%;
  margin-right: 10px;
  height: auto;
  float: left;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row nowrap;
  border: 1px solid red;
  padding: 10px;
}

.dealsglobal h2 {
  margin-left: 10px;
}

.dealsindia h2 {
  margin-left: 10px;
}

.dealsleft {
  margin: 0px 25px 10px 0px;
  padding: 5px;
  border: 1px solid #ccc;
  flex: 1 0 0;
  align-self: flex-start;
}

.dealsleft img {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 4px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.dealsright {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  overflow: auto;
  flex: 1 0 0;
  align-self: flex-start;
}
<div class="dealsglobal">
  <h2>Global Coupons</h2>
  <div class="flex">
    <div class="dealsleft">
      <img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" />
    </div>
    <div class="dealsright">
      Test
    </div>
  </div>
</div>
<div class="dealsglobal">
  <h2>Global Coupons</h2>
  <div class="flex">
    <div class="dealsleft">
      <img src="http://lorempixel.com/400/200/sports/" alt="HeavenGifts.com Web Store" align="middle" />
    </div>
    <div class="dealsright">
      Test
    </div>
  </div>
</div>

这是工作小提琴

<强> fiddle

相关问题
最新问题