Question

我在首页上工作如下 :.

我尝试使创建，更新和删除按钮更高一点，以便它们的高度与Project：[7]示例项目和7个项目之间的中间位置相同。

以下是HTML代码和CSS代码，您可以在其中找到我创建mybtn类并尝试使用vertical-align:center;但它不起作用。任何建议都会很棒！

<div>
  <div>
    <h2>Project: [{{items.length}}] Example Project </h2>
      <p>{{items.length}} items
          <button (click)='onDelete()' type="button" class="btn float-right btn-space mybtn">delete</button>
          <button (click)='onUpdate()' type="button" class="btn float-right btn-space mybtn">update</button>
          <button (click)='onCreate()' type="button" class="btn float-right btn-space mybtn">create</button>
      </p>
  </div>

<table class="table table-bordered table-striped margin">
    <thead>
          <tr>
              <th>select</th>
              <th>No.</th>
              <th>Company</th>
              <th>CCO No.</th>
              <th>Budget Code</th>
              <th>Description</th>
              <th>Award Date</th>
              <th>Sent Date</th>
              <th>Cost Status</th>
              <th>Committed Amount</th>
          </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of items">
          <td><input type="checkbox" (change)="checkbox(item, $event)" [(ngModel)]="item.flag"></td> 
          <td>{{item.No}}</td>
          <td>{{item.Company}}</td>
          <td>{{item.CCO_No}}</td>
          <td>{{item.Budget_Code}}</td>
          <td>{{item.Description}}</td>
          <td>{{item.Award_Date}}</td>
          <td>{{item.Sent_Date}}</td>
          <td>{{item.Cost_Status}}</td>
          <td>{{item.Committed_Amount}}</td>
        </tr>
      </tbody>
  </table>

CSS文件如下：

.btn-space {
    margin-right: 5px;
    margin-bottom: 10 cm;
    margin-top: 10 cm;

  }

  .table td, .table th, .table input {
    text-align: center;   
 }

 .mybtn {
  vertical-align:center; 
 }

Answer 1

你应该将h2包含在一个div中并将其向左浮动，同样将div中的按钮括起来并向右浮动它们并为这个div设置一些填充，最后将item counter段包含在另一个div中并清除它们在它上面。

您可以从此

更改标题div

<div>
    <h2>Project: [{{items.length}}] Example Project </h2>
    <p>{{items.length}} items
        <button (click)='onDelete()' type="button" class="btn float-right btn-space mybtn">delete</button>
        <button (click)='onUpdate()' type="button" class="btn float-right btn-space mybtn">update</button>
        <button (click)='onCreate()' type="button" class="btn float-right btn-space mybtn">create</button>
    </p>
</div>

到此：

<div>
    <div style="float:left;">
        <h2>Project: [{{items.length}}] Example Project </h2>
    </div>
    <div style="float:right; padding:20px;">
        <button (click)='onDelete()' type="button" class="btn float-right btn-space mybtn">delete</button>
        <button (click)='onUpdate()' type="button" class="btn float-right btn-space mybtn">update</button>
        <button (click)='onCreate()' type="button" class="btn float-right btn-space mybtn">create</button>
    </div>
    <div style="clear:both;">
        <p>{{items.length}} items</p>
    </div>
</div>

获得所需的结果。我希望它可以帮助你。

Answer 2

快速修复你可以做到：

.mybtn {
  position: relative;
  top: -10px;
}

vertical-align不适用于此。

Answer 3

由于您在from selenium import webdriver import os class pySelChrome: ''' classdocs ''' def openChrome(self): ''' Constructor ''' chromeDriverPath = "/Users/XX/Documents/workspace/PySelenium/pySelPack/chromedriver" os.environ["webdriver.chrome.driver"]=chromeDriverPath os.environ["webdriver.chrome.driver"]="/Users/XX/Documents/workspace/PySelenium/pySelPack/chromedriver" driver = webdriver.Chrome(chromeDriverPath) driver.get("http://gmail.com") driver.implicitly_wait(30) driver.fullscreen_window() return driver if __name__ == "__main__": # execute only if run as a script psc = pySelChrome() psc.openChrome()标记下发布了此内容，我假设您正在寻找一个干净的Bootstrap 4解决方案（而不是依赖于css hacks）。

如果是这种情况，解决方案相当简单（并且不需要任何自定义CSS）：

首先，在主列中创建一个新行，然后在其中放入2列。您的标题和段落进入第一个内部列和第二个内部的按钮。

您只需将类bootstrap-4添加到按钮列即可。完成！

为了给按钮提供一些间距，我用自然的Bootstrap 4类d-flex align-items-center justify-content-end（margin-right 1 unit）替换了你的自定义css。

最后，为了将文本集中在表格中，我将mr-1类添加到了该表中。 text-center类确保表格不会破坏较小屏幕上的布局。

这是完整的，有效的代码段（点击下面的“运行代码段”按钮）：

table-responsive

Answer 4

在css代码中，对于＆＃39; mybtn类＆＃39;，使用中间而不是中心：

.mybtn {
  vertical-align:middle; 
}

使按钮成为div中的垂直中心

4 个答案: