提问者:小点点

使用滚动CSS将Div水平居中


我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢?我看到了一个解决方案使用边距自动和最大宽度,但div将被削减,所以我没有这样做。

null

.az-chips-btns-parent {
  overflow  : auto;
  margin    : auto;
  max-width : 30rem;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div class="az-chips-btns-parent">
  <div class="az-chips-btns">
    <div class="az-save-filters-parent" style="margin-top: 1.5px;"> 
      <button type="button" class="btn p-0 rounded-circle az-save-filters-chip ui-btn ui-shadow ui-corner-all">
        <i class="fa fa-star az-save-filters" style="font-size: 15px;"></i>
      </button>
    </div>
    <button type="button" class="btn az-country-chip ui-btn ui-shadow ui-corner-all">
      <div>Country</div>
      <div class="az-country-selected-chip az-selected-chip text-danger">3 selected</div>
    </button>
    <button type="button" class="btn az-brand-chip ui-btn ui-shadow ui-corner-all">
      <div>Brand</div>
      <div class="az-brand-selected-chip az-selected-chip text-danger"></div>
    </button>
    <button type="button" class="btn az-location-chip ui-btn ui-shadow ui-corner-all">
      <div>Location</div>
      <div class="az-location-selected-chip az-selected-chip text-danger"></div>
    </button>
    
    <button type="button" class="btn az-store-chip ui-btn ui-shadow ui-corner-all">
      <div>Store</div>
      <div class="az-store-selected-chip az-selected-chip text-danger"></div>
    </button>
    
    <button type="button" class="btn az-section-chip ui-btn ui-shadow ui-corner-all">
      <div>Section</div>
      <div class="az-section-selected-chip az-selected-chip text-danger"></div>
    </button>
  </div>
</div>

null


共1个答案

匿名用户

如果答案适用于OP,那么我会给出一个描述。

null

body {
  height: 5000px;
}

.az-chips-btns-parent {
  overflow  : auto;
  margin    : auto;
  max-width : 30rem;
  
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div class="az-chips-btns-parent">
    <div class="az-chips-btns">
        <div class="az-save-filters-parent" style="margin-top: 1.5px;"> 
            <button type="button" class="btn p-0 rounded-circle az-save-filters-chip ui-btn ui-shadow ui-corner-all">
                <i class="fa fa-star az-save-filters" style="font-size: 15px;"></i>
            </button>
        </div>
        <button type="button" class="btn az-country-chip ui-btn ui-shadow ui-corner-all">
        <div>Country</div>
            <div class="az-country-selected-chip az-selected-chip text-danger">3 selected</div>
        </button>
        
        <button type="button" class="btn az-brand-chip ui-btn ui-shadow ui-corner-all">
          <div>Brand</div>
          <div class="az-brand-selected-chip az-selected-chip text-danger"></div>
        </button>
        <button type="button" class="btn az-location-chip ui-btn ui-shadow ui-corner-all">
            <div>Location</div>
            <div class="az-location-selected-chip az-selected-chip text-danger"></div>
        </button>
        
        <button type="button" class="btn az-store-chip ui-btn ui-shadow ui-corner-all">
            <div>Store</div>
            <div class="az-store-selected-chip az-selected-chip text-danger"></div>
        </button>
        
        <button type="button" class="btn az-section-chip ui-btn ui-shadow ui-corner-all">
            <div>Section</div>
            <div class="az-section-selected-chip az-selected-chip text-danger"></div>
        </button>
    </div>
</div>