Question

我有一个位于import java.io.*; import java.net.*; public class NewUDP2 /*main class*/ { public static void main(String arg[])throws Exception { /*calling both threads ReceiveDataClass and SendDataClass*/ ReceiveDataClass t=new ReceiveDataClass(); SendDataClass obj=new SendDataClass(); t.start();/*starting threads here*/ obj.start(); } } class ReceiveDataClass extends Thread { byte receiveData[]=new byte[10024]; DatagramSocket ds; DatagramPacket dp; public void run() { try{ while(true) { //byte receiveData[]=new byte[1024]; ds=new DatagramSocket(40000); dp=new DatagramPacket(receiveData,receiveData.length); ds.receive(dp); String str=new String(dp.getData()); System.out.println("person1: "+str); ds.close(); } }catch(Exception e){} } } class SendDataClass extends Thread { public void run() { try { while(true) { byte sendData[]=new byte[100924]; DatagramPacket dp; InetSocketAddress sd=new InetSocketAddress("192.168.8.101",50000); DatagramSocket ds=new DatagramSocket(); BufferedReader dis; dis = new BufferedReader(new InputStreamReader(System.in)); String data=dis.readLine(); System.out.println("me: "+data); sendData=data.getBytes(); dp=new DatagramPacket(sendData,sendData.length,sd); ds.send(dp); ds.close(); } }catch(IOException e){} } }标签顶部的字体真棒图标，问题是它没有居中。它在Bootstrap中的每个断点处显示在不同的位置。

无论屏幕尺寸大小，我如何绝对将图标居中并保持在中心位置？

DEMO https://jsfiddle.net/halnex/ye3ppgej/2/

HTML

img

CSS

<div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
  <a class="thumbnail" href="#">
    <i class="fa fa-play-circle-o fa-4x"></i>
    <img class="img-responsive" alt="" src="http://placehold.it/250x180" />
    <div class="caption">The Title</div>
  </a>
</div>

Answer 1

将img和i放在一个元素中，在公共父级上设置position: relative，然后使用position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)的组合来绝对居中图标

＆＃13;

.img {
  position: relative;
}

.img i {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
  <div class='col-sm-4 col-xs-6 col-md-3 col-lg-3'>
    <a class="thumbnail" href="#">
      <div class="img">
        <i class="fa fa-play-circle-o fa-4x"></i>
        <img class="img-responsive" alt="" src="http://kenwheeler.github.io/slick/img/fonz1.png" />
      </div>
      <div class="caption">The Title</div>
    </a>
  </div>
</div>

＆＃13;

Answer 2

使用

transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
-moz-transform: translate(0%,-50%);
-o-transform: translate(0%,-50%);

下面的代码段

fiddle is here

Answer 3

您可以使用flex布局进行居中：

您必须稍微调整一下html / css：

<a class="thumbnail" href="#">
    <div class="icon-wrap">
      <i class="fa fa-play-circle-o fa-4x"></i>
    </div>
    <img class="img-responsive" alt="" src="http://placehold.it/250x180" />
    <div class="caption">The Title</div>
</a>

.thumbnail {
  position: relative;
}

.icon-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

如果您需要调整标题，可以将margin-bottom添加到.icon-wrap i。

如果height始终包含该尺寸的图片，您也可以将180px设置为int

在引导程序img中心图标

3 个答案: