我布局中的这些div不会居中。我尝试了一切

时间:2017-01-23 06:38:27

标签: html css

我对CSS太可怕了,这很有趣。

我正在尝试通过复制网页来学习它并没有发生在我身上。在过去的三天里,我已经尝试过7次删除它,但是这次我非常接近我想要删除它。

我只是设置布局(在内部元素之前),这对我来说是最难的部分。

这是我到目前为止所做的:



.bod1 {
  margin: auto;
  width: 40%;
  height: 700px;
  background-color: red;
  display: block;
  float: left;
}
.bod2 {
  margin: auto;
  width: 20%;
  height: 700px;
  background-color: green;
  display: block;
}
.foot {
  margin:auto;
  width: 60%;
  height: 340px;
  background-color: blue;
  display: block;
}
#logo {
  display: block;
  float: left;
  height: 81px;
  width: 194px;
  margin-top: 80px;
}

#tabs {
  display: inline-block;
  padding-top: 80px;
  margin-right: 25px;
  float: right;
  color: black;
}
#tabs li {
  display: inline;
}
       

  


<body>
  <div class="head">
    <div id="logo">
      <a href="#"><img src="https://images.mint.com/web-client/images/mint_logo.png" alt="Mint logo" /></a>
    </div>
    <div id="tabs">
      <ul>
        <li>Sign up</li>
        <li>Log in</li>
      </ul>
    </div>
  </div> 
  <div class="bod1">
    <h1></h1> 
     </div>
  <div class="bod2"> 
    </div>
   <div class="foot">  
  </div>   
</body>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

我认为你可以删除 float:left; on class =“。bod1”

   template <typename Dtype>
    void SigmoidCrossEntropyLossLayer<Dtype>::Forward_cpu(
        const vector<Blob<Dtype>*>& bottom, const vector<Blob<Dtype>*>& top) {
      // The forward pass computes the sigmoid outputs.                                                                                                                                                                                    
      sigmoid_bottom_vec_[0] = bottom[0];
      sigmoid_layer_->Forward(sigmoid_bottom_vec_, sigmoid_top_vec_);
      // Compute the loss (negative log likelihood)                                                                                                                                                                                        
      // Stable version of loss computation from input data                                                                                                                                                                                
      const Dtype* input_data = bottom[0]->cpu_data();
      const Dtype* target = bottom[1]->cpu_data();
      int valid_count = 0;
      Dtype loss = 0;
      for (int i = 0; i < bottom[0]->count(); ++i) {
        const int target_value = static_cast<int>(target[i]);
        if (has_ignore_label_ && target_value == ignore_label_) {
          continue;
        }
        loss -= input_data[i] * (target[i] - (input_data[i] >= 0)) -
            log(1 + exp(input_data[i] - 2 * input_data[i] * (input_data[i] >= 0)));
        ++valid_count;
      }
      normalizer_ = get_normalizer(normalization_, valid_count);
      top[0]->mutable_cpu_data()[0] = loss / normalizer_;
    }
.head {
  margin: auto;
  margin-top: 10px;
  width: 60%;
  height: 130px;
  background-color: purple;
  display: block;
}
.bod1 {
  margin: auto;
  width: 40%;
  height: 700px;
  background-color: red;
  display: block;
}
.bod2 {
  margin: auto;
  width: 20%;
  height: 700px;
  background-color: green;
  display: block;
}
.foot {
  margin:auto;
  width: 60%;
  height: 340px;
  background-color: blue;
  display: block;
}
#logo {
  display: block;
  float: left;
  height: 81px;
  width: 144px;
  margin-top: 50px;
}
#tabs {
  display: inline-block;
  padding-top: 50px;
  margin-right: 25px;
  float: right;
  color: black;
}
#tabs li {
  display: inline;
}

答案 1 :(得分:1)

请查看以下链接我正在为您制作:

https://jsfiddle.net/fatehjagdeo/qj7guLhj/

或者只用你的html替换你的html:

<Terminallist name = "xml data">
  <value id = "1">
    <TERMINAL>Terminal2</TERMINAL>
    <STATE>Offline</STATE>
  </value>
  <value id = "2">
    <TERMINAL>Terminal3</TERMINAL>
    <STATE>Online</STATE>
  </value>
  <value id = "3">
    <TERMINAL>Terminal4</TERMINAL>
    <STATE>Online</STATE>
  </value>
</Terminallist>

答案 2 :(得分:0)

我假设你只是想要将具有'bod1'类的红色div放在中心位置。我调整了它的风格,如下所示

  foreach (KeyValuePair<string, string> word in StopWords)
       {
          if (list.contain(word.key))
               list.RemovAll(s=>s==word.key);
       }

希望这有帮助。

答案 3 :(得分:0)

只需使用想要居中的div的中心课

.center {
    margin: auto;
    width: 50%;
 }

<div class="center">Div is centered</div>

希望这个帮助

答案 4 :(得分:0)

将css更改为以下内容: -

如果您想要执行此类操作,请在下面进一步查询。

.bod1 {
    margin: -161px 111px;
    width: 40%;
    height: 700px;
    background-color: red;
    display: block;
    float: left;
}
.bod2 {
    margin: 0px 333px;
    width: 20%;
    height: 700px;
    background-color: green;
    display: block;
}

这是你的jsfiddle link