Question

add_action( 'woocommerce_form_field_text','reigel_custom_heading', 10, 2 );
function reigel_custom_heading( $field, $key ){
    // will only execute if the field is billing_company and we are on the checkout page...
    if ( is_checkout() && ( $key == 'billing_company') ) {
        $field .= '<div id="add_custom_heading"><h2>' . __('Custom Heading Here') . '</h2></div>';
    }
    return $field;
}

.col-xs-4{
    margin: auto;
    padding-left: 2em;
    text-align: left;
    display: inline-block;
    clear: both;
}

h1{
    text-align: center;
    font-weight: bold;
}

h3{
    color: #09423f;
}


p{
    color: black;
}


#works{
    max-width: 100%;
    height: auto;
    border: 0;
}

我想尝试将所有三个图像与标题对齐在一行中。我试着漂浮：左，但这三个都不起作用。我也尝试其他方式，但它保持不变。请帮我。你给我正确答案我会点击绿色勾选。

Answer 1

添加此

＆＃13;

.col-xs-4{
  width: 33.33%;
}
.col-xs-4 img{
  text-align: center;
  margin: 0 auto;
}

＆＃13;

Answer 2

你没有连接你的bootrap CDN，虽然你使用像col-xs-4这样的Bootstrap，附上它然后你就会完全对齐盒子

Bootstrap CDN将此附加到<head>

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

并删除以下不必要的课程

.col-xs-4{
    margin: auto;
    padding-left: 2em;
    text-align: left;
    display: inline-block;
    clear: both;
}

CodePen：http://codepen.io/anon/pen/graKZe

Answer 3

我在你的代码中附加了一个bootstrap cdn。

并且由于明确：在你的（.col-xs-4）内部CSS中你无法水平对齐它们。

附带的plunker副本：enter link description here

.col-xs-4{
margin: auto;
padding-left: 2em;
text-align: left;
display: inline-block;

}

<link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

尝试使用水平而非垂直的标题内嵌图像

3 个答案: