Question

我已尝试过这个网站上的所有内容，让我的雅虎管道在页面上居中，而不会将文本集中在管道中，并且没有任何效果。我真的需要第二眼看到这一个！这是我的代码：

CSS：

#pipe_container{
    width: 850px;
    height: 350px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    text-align: center;
}

#event_pipe {  
    position: relative;
    text-align:left;
    width:100%px;  
    height:350px;  
    background-color:#888;
    padding:0px;
    margin: 0px 20px 20px 20px;
}

HTML：

 <div id="pipe_container">
   <div id="event_pipe">     
       <script src="http://l.yimg.com/a/i/us/pps/listbadge_1.6.js">
        { 
          "pipe_id":"2a44070dcf6974aea04ad155a76caef4",
          "_btype":"list",
          "width":"80%",
          "height":"350px"
        }
      </script>
   </div>
</div>

我不能在“event_pipe”代码中使用居中属性，因为它集中了所有内容，包括文本。我希望文本保留在左侧。

Answer 1

我无法使用CSS工作。我不得不将它作为参数传递给管道：

 <div id="pipe_container">
   <div id="event_pipe">     
       <script src="http://l.yimg.com/a/i/us/pps/listbadge_1.6.js">
        {
          "pipe_id":"2a44070dcf6974aea04ad155a76caef4",
          "_btype":"list",
          "width":"80%",
          "height":"350px",
          "margin":"auto"
        }
      </script>
   </div>
</div>

注意JSON的最后两行：

"height":"350px",
"margin":"auto"

这就是诀窍。

Here's a link to the working jsFiddle

Answer 2

尝试将#event_pipe规则更改为：

#event_pipe > div {  
    position: relative;
    text-align:left;
    width:100%px;  
    height:350px;  
    background-color:#888;
    padding:0px;
    margin: 0px auto;
}

Answer 3

添加你的风格：

#event_pipe div:first-child {
          margin: 0px auto;
}

Answer 4

将它放在头部以进行本地测试，以防止它进入怪癖模式。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

并试试这个css

#pipe_container{
  width: 850px;
  height: 350px;
  position: relative;
  margin:0 auto;
  background-color: #fff;
  text-align: center;
 }
#event_pipe > div{
  margin:0 auto;
 }
#event_pipe {  
position: relative;
text-align:left; 
height:350px;  
background-color:#888;
padding:0px;
margin: 0px 20px 20px 20px;
}

不能以<div>标签</div>为中心

4 个答案: