Question

我尝试使用boostrap的public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { rootview = inflater.inflate(R.layout.fragment_map, container, false); get_braintree_token(rootview.getContext()); return rootview; } public void get_braintree_token(final Context viewb) { StringRequest stringRequest = new StringRequest(Request.Method.GET, "My server URL", new Response.Listener<String>() { @Override public void onResponse(String response) { braintreeToken = response.toString(); Log.e("Braintreetoken","token is:"+braintreeToken); onBraintreeSubmit(braintreeToken, viewb); } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { braintreeToken = null; } }); // Add the request to the RequestQueue. requestQueue.add(stringRequest); } public void onBraintreeSubmit(String token, Context c) { Log.e("tokenreceived",token); DropInRequest dropInRequest = new DropInRequest(); dropInRequest.clientToken(token); Intent drop = dropInRequest.getIntent(c); startActivityForResult(drop, BRAINTREE_REQUEST_CODE); } @Override public void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == BRAINTREE_REQUEST_CODE) { if (resultCode == 1) { DropInResult result = data.getParcelableExtra(DropInResult.EXTRA_DROP_IN_RESULT); // use the result to update your UI and send the payment method nonce to your server } else if (resultCode == Activity.RESULT_CANCELED) { // the user canceled } else { // handle errors here, an exception may be available in Exception error = (Exception) data.getSerializableExtra(DropInActivity.EXTRA_ERROR); } } }，fluid-container和img-responsive（以及center-block CSS）对图像进行居中，但我没有＆＃39到目前为止已经成功了。

我试图实施的代码如下：

margin: 0 auto;

但它并没有使图像居中。有什么帮助吗？

谢谢！

编辑：我正在使用codepen：https://codepen.io/diegomengue/pen/WOwJYP。是否有可能代码混乱？

Answer 1

您在笔中加载了bootstrap 4，而.center-block是一个bootstrap 3功能。将bootstrap 3添加到笔中。 https://codepen.io/mcoker/pen/qjaBNK

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
 <div class='container-fluid'>
  
  <div class='row'>
  
  <img src="https://www.cartacapital.com.br/mais-admiradas/o-colecionador-de-empresas-5838.html/paulo-lemann/@@images/4dd0c0a1-9ae4-4fd2-8724-e59867bb14c1.jpeg" alt="Jorge Paulo Lemann" class="img-responsive center-block" >
   </div>
 </div>
</body>

Answer 2

由于row此处有display: flex，您可以添加

.row {
  justify-content: center;
}

使图像居中

https://codepen.io/anon/pen/EXgxgo

使用引导程序居中映像

2 个答案: