Question

＆＃13;

<div class="card">
  <div class="col-md-12">
    <span style="margin-left:20px;">
                                 <input rows="4"  cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
    </span>

    <i class="fa fa-long-arrow-left" style="font-size:36px;vertical-align:-19%;color:green"></i>
    <span>
                            <input type="text" name="boxx" id="boxx" style="width:200px;">
                             </span>
    <i class="fa fa-long-arrow-right" style="font-size:48px;color:green"></i>
    <span style="margin-right:20px;">
                                 <input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
                             </span>
  </div>
</div>

＆＃13;

我想将中间文本框对齐div的中心，图标应该靠近文本框。

Answer 1

您设置第二个＆lt;的字体大小。我＆gt;到48并导致此错误。然后我将bootstrap类更改为3行3-6-3的行。确保你的引导引用被很好地引用：

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

             <div class ="row">
                    <div class="col-sm-3">
                          <span>
                                 <input rows="4"  cols="50" type="text" name="box" id="box" style="width:50px;float:left;"></span>
                         </span>
                           <i class="fa fa-long-arrow-left" style="font-size:36px;color:green"></i>
                     </div>
                    <div class="col-sm-6">

                        <span>
                            <input type="text" name="boxx" id="boxx" style="width:200px;">
                             </span>
                        <i class="fa fa-long-arrow-right" style="color:green"></i>
                         </div>
                    <div class="col-sm-3">
                        <span>
                                 <input rows="4" cols="50" type="text" name="box" id="box" style="width:50px;float:right;">
                             </span>
                         </div>
               </div>

Answer 2

您可以使用.col-md-12 { display: flex; align-items: center; } #input-left { width:50px; } #input-center { width:200px; } #input-right { width:50px; } .middle-box { margin-left: auto; margin-right: auto; display: flex; align-items: center; } .fa-long-arrow-left { font-size:36px !important; /*vertical-align:-19%;*/ color:green; } .fa-long-arrow-right { font-size:48px !important; color:green; }来集中所有内容：

<link href="https://cdnjs.cloudflare.com/ajax/libs/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="card">
  <div class="col-md-12">
    <span style="margin-left:20px;">
      <input rows="4" cols="50" type="text" name="box" id="input-left">     </span>

    <span class="middle-box">
      <i class="fa fa-long-arrow-left"></i>
      <span>
         <input type="text" name="boxx" id="input-center">
      </span>
      <i class="fa fa-long-arrow-right"></i>      
    </span>
    
    <span style="margin-right:20px;">
      <input rows="4" cols="50" type="text" name="box" id="input-right">
    </span>
  </div>
</div>

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args:[
       '--start-maximized' // you can also use '--start-fullscreen'
    ]
    });

  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768});
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  await page.screenshot({path: 'example.png'});

  browser.close();
})();

将文本框对齐中心，图标也接近文本框

2 个答案: