Question

所以我有一个布局，在行div中包含3个列div。在第一个第一列div中，我有另一个div与min-width，max-width相关联。

当我尝试text-align: center;第一列div时，对齐永远不会发生？

.container {}

.icon-col {
  text-align: right;
}

.col-25 {
  width: 25%;
  float: left;
}

.col-50 {
  width: 50%;
  float: left;
}

.icon {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  background-color: red;
  color: white;
  text-align: center;
  height: 38px;
  line-height: 38px;
}

<div class="container">
  <div class="col-25 icon-col">
    <div class="icon">I</div>
  </div>
  <div class="col-50">
    this is 50%
  </div>
  <div class="col-25">
    25%
  </div>
</div>

有人可以解释为什么会发生这种情况以及如何解决这个问题吗？

谢谢！

Answer 1

这是因为div是块元素，而不是内联元素。要解决此问题，请在display:inline-block div。

上添加.icon

.icon {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    background-color: red;
    color: white;
    text-align: center;
    height: 38px;
    line-height: 38px;
    display: inline-block;
}

.container {
}

.icon-col {
    text-align: center;
}

.col-25 {
    width: 25%;
    float: left;
}

.col-50 {
    width: 50%;
    float: left;
}

.icon {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    background-color: red;
    color: white;
    text-align: center;
    height: 38px;
    line-height: 38px;
    display: inline-block;
}

<div class="container">
    <div class="col-25 icon-col">
        <div class="icon">I</div>
    </div>
    <div class="col-50">
        this is 50%
    </div>
    <div class="col-25">
        25%
    </div>
</div>

对齐中心：https://jsfiddle.net/0mp4zyje/2/
右对齐：https://jsfiddle.net/0mp4zyje/3/

Answer 2

对象没有扩展，因为它没有理由;内容的宽度低于max-width。

要将此内容置于中心位置，您只需向margin: 0 auto添加icon。

https://jsfiddle.net/0mp4zyje/1/

Answer 3

    Sub PivotRefresh()
    '
    ' PivotRefresh Macro
    '
    Range("AA5").Select
    ActiveSheet.PivotTables("PivotTable2").PivotCache.Refresh
    End Sub


Sub RefreshAllPivotTables() 'Refresh Pivot Table
 Worksheets("FOUR").Activate
    For Each cache In ThisWorkbook.PivotCaches
    cache.Refresh 'Refresh Pivot Table      
    Next
End Sub

Sub Format_ws()
'
' Format_ws Macro
'

'

  Dim i As Long

  Application.ScreenUpdating = False
  For i = 5 To Worksheets.Count
    With Sheets(i)
    Sheets("Template").Select
    Rows("1:1").Select
    Selection.Copy
    Sheets(i).Select
    Rows("1:1").Select
    Selection.Insert Shift:=xlDown
    End With
Next i
Application.ScreenUpdating = True
End Sub



Public Function TabI(TabIndex As Integer, Optional MyTime As Date) As String
TabI = Sheets(TabIndex).Name
End Function

请检查上面CSS代码的修改后的行。当您对.icon { width: 38px; /* Fixed width div*/ min-width: 38px; max-width: 38px; background-color: red; color: white; margin: auto; /* This will place the div center to its parent */ text-align:center; height: 38px; line-height: 38px; }元素使用固定宽度（即您正在做的事情）时，请确保使用margin：auto;使其水平居中。

当包含具有最小和最大宽度的另一个div时，DIV不会右对齐

3 个答案: