Question

我使用以下HTML代码创建了由图像和文本组成的范围。我正在尝试使用以下css类将图像对齐到图像旁边：

add_filter('woocommerce_add_cart_item_data', 'order_session_date', 10, 2);

function order_session_date( $data, $id) {
   global $woocommerce;
   $product_id = $id;
   $sched_val = get_post_meta($product_id, '_sched_val', true);
   $data = array(
       $data_dates = $sched_val
   );
   WC()->session->set('name_for_your_data', $data);

   return $data;
}

span.my-profile {
  background-image: url('http://placehold.it/450x100/fc6');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 16px; /* Or size of icon + spacing */
  text-align: center;
}

但是，这没有按预期工作。并且文本仍然与图像左对齐。那我的代码出了什么问题？如何将文本与中心对齐？

提前致谢。

Answer 1

将背景图像添加到与文本相同的跨度中，只会将图像作为带有文本的跨度的背景放置。尝试使用<img />标记将图像作为单独的元素放置在跨度中。然后，您可以使用display：inline-block或float in css。

来控制图像和文本

Answer 2

使用伪元素：放置图像之前（更改宽度，高度和边距）：

span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }

Answer 3

尝试使用 width-height ， padding 和 display：block 属性，它会起作用。

检查此here

尝试使用下面的css样式

span.my-profile{
  width:200px;
  height:100px;
  display:block;
  background:url(http://placehold.it/200x100) no-repeat;
  padding-top:100px;
  text-align:center;
}

CSS：如何在跨度内的图像旁边对齐文本？

3 个答案: