问题：

使用滚动CSS将Div水平居中

上官英哲

2023-03-14

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

null

.az-chips-btns-parent {
  overflow  : auto;
  margin    : auto;
  max-width : 30rem;
}

html prettyprint-override"><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个答案

阳博赡

2023-03-14

如果答案适用于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>

类似资料：

CSS水平居中固定div？

问题内容：我知道这个问题存在一百万次，但是我找不到解决方案。我有一个div，它应该固定在屏幕上，即使滚动页面，它也应该始终保持在屏幕中间！对于所有浏览器尺寸，div应该具有宽度，应该远离顶部（页边距），应该在页面中间水平居中，并且在滚动其余页面时不应移动。那可能吗？问题答案：
如何使用CSS水平居中绝对div？

问题内容：我有一个div，希望它水平居中-尽管我给它的是不居中… 问题答案：您需要设置和。这指定了从窗口侧面偏移边缘边缘的距离。类似于“ top”，但指定框的右边距边缘与框的包含块的[right / left]边缘的[left / right]偏移多远。注意：元素的宽度必须小于窗口的宽度，否则它将占用窗口的整个宽度。如果可以使用媒体查询来指定最小边距，然后过渡到更大的屏幕尺寸
CSS垂直和水平居中Div

问题内容：我弹出一个包含ASP.NET表单的弹出窗口，单击链接“请求信息”，然后出现该表单。但是，具有链接“请求信息”以触发弹出窗口的页面包含很多内容，因此需要滚动才能看到该链接。如果用户滚动阅读内容，则需要始终居中，否则，如果他们不滚动，弹出窗口仍将居中显示在屏幕上。在绝对定位，整个页面宽度与边距设置为。问题答案：如果div具有固定的宽度和高度，请使用：（如果width = 120p
CSS水平滚动

问题内容：我正在尝试创建一系列只能水平滚动的照片。它应该看起来像这样的但是，只有通过指定包含照片的的宽度，才能实现上述目的（因此它们不会“自动换行”）。如果我不放宽- 看起来像这样；使用CSS可以防止固定宽度的图像发生变化，该怎么办。谢谢问题答案：您可以使用与。这样写：
CSS将图像水平居中

问题内容：我正在尝试使用CSS将图像水平居中放置。我正在使用以下HTML代码在屏幕上显示图像：我正在裁剪图像，因为我只想显示一些图像，并且正在使用以下CSS：但是，一旦裁切后，我将无法确定如何居中。有人能帮忙吗？问题答案：这样使用绝对位置和保证金位置
将DIV水平和垂直居中

问题内容：有没有办法在垂直和水平方向上输入一个DIV，但这很重要，当窗口小于内容时，内容将不会被剪切。div必须具有背景色，宽度和高度。我总是将div的中心定位为绝对位置和负边距，如提供的示例所示。但是它有一个问题，那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题？ CSS： HTML：我的问题不是重复的“如何在水平和垂直方向上居中放置元素？”1-

使用滚动CSS将Div水平居中

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档