如何与display水平对齐:inline-block

时间:2016-08-10 00:30:43

标签: html css display

看起来非常简单,但在文本上使用display:inline-block时,我无法在父元素中水平居中文本。我需要它display:inline-block,因为我希望我创建的文本的边框是文本的大小,而 NOT 是父文件的边框。

是否有另一种方法来制作边框我给文本宽度是文本而不是父文件?

    a.studio-nav {
      font-family: 'brandon-reg';
      font-weight: 900;
      color: white;
      font-size: 20px;
      display: inline-block;
      text-align: center;
      margin:0 auto;
      padding:7px 4px;
    }
    a.studio-nav:hover {
      border:2px solid white; 
      -webkit-border-radius: 7px;
      -moz-border-radius: 7px;
      border-radius: 7px;
      text-decoration: none;
    
    }
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="row clearfix">
    	<div class="col-xs-4 col-md-4">
    		<a href="/" class="studio-nav">
    			text
    		</a>
    	</div>
    	<div class="col-xs-4 col-md-4">
    		<a href="/" class="studio-nav">
    			I want
    		</a>
    	</div>
    	<div class="col-xs-4 col-md-4">
    		<a href="/" class="studio-nav">
    			centered
    		</a>
    	</div>
    </div>

3 个答案:

答案 0 :(得分:1)

这可能就这么简单吗?

.row {
    text-align: center;
}

示例小提琴:https://jsfiddle.net/rczfnf6d/

答案 1 :(得分:1)

Bootstrap还有一种快速方法可以通过名为&#34; .text-center&#34;

的对齐类来实现这一目标。
$('.cbox_leave_half').live('click', function (e) {
    var tr = $(e.target).closest('tr');        
    var target = $(e.target).is(':checked');

    if ($(this).is(':checked))
    {  
        $(tr).find('.cbox_leave_halfPM').attr("checked",false); 
    }

    ...
    ...

答案 2 :(得分:1)

尝试

    /**
    * @Route("/saveData")
    * @Method("POST")
    **/
    public function saveDataAction (Request $request) {
      $data = $request->getContent();
      $dataDecode = json_decode($data);

      if (is_object($dataDecode)) {
        foreach ($dataDecode->customer as $customer) {
          //get data
          foreach ($dataDecode->location as $location) {
            //getdata
            foreach ($dataDecode->machine_1 as $machine_1) {
              //get and set data
            }
            foreach ($dataDecode->machine_2 as $machine_2) {
              //get and set data
            }
            foreach ($dataDecode->machine_3 as $machine_3) {
              //get and set data
            }
          }
        }

而不是

foreach