Question

我试图将div放在课堂中心＆＃34; lc-buy-sm-buy-wrap ＆＃34;在课堂上与课程＆＃34; lc-product-buy-sm-wrap ＆＃34;，但无论我尝试什么，它都会保持在左侧并且不会移动调整窗口大小时。为了实现可视化，我将背景颜色设置为div中的柚木，我希望居中，蓝色为父div调整大小并按预期工作。

我还试过在div上设置display：inline-block，在父div上设置text-align：center而没有运气。

HTML ：

if(red.style.opacity == 0){
   green.style.height = "200px";
}

BuySmall.cshtml 的一部分： ...

   def builder = HttpBuilder.configure {
            request.uri = 'http://ies-iesd-jira.ies.mentorg.com:8080'
            request.contentType = 'application/json'
           // request.auth.digest("user","password", true) -->does not work with JIRA
            request.headers['Authorization'] = 'Basic ' + 'user:password'.bytes.encodeBase64()
        }

BuySmall.cshtml的原始文件少：

<div class="d-md-flex">
    <section>
        <div class="d-flex align-items-center lc-product-visual-wrap">
            <nav id="thumbNavPrevious" class="lc-product-img-nav-wrap"><i class="fa fa-arrow-circle-left fa-3x lc-product-img-nav-left" aria-hidden="true" title="@_sharedLocalizer["Previous"]"></i></nav>
            <div class="container">
                <div class="lc-product-graphic-outer-wrap">
                    <div class="lc-product-graphic-wrap"></div>
                </div>
            </div>
            <nav id="thumbNavNext" class="lc-product-img-nav-wrap"><i class="fa fa-arrow-circle-right fa-3x lc-product-img-nav-right" aria-hidden="true" title="@_sharedLocalizer["Next"]"></i></nav>
        </div>
        <div class="lc-product-current-count-wrap">
            <span class="lc-product-current-count"></span>
        </div>
        <div class="lc-product-buy-sm-wrap">
            @Html.Partial("/Views/Partials/BuySmall.cshtml", new BuySmallContextModel() { Product = Model, HandleGraphic = false })
        </div>
        <div class="d-none d-md-block lc-product-thumb-wrap" >
            <div class="d-inline-flex flex-wrap">
                @{
                    int i = 1;
                }
                @foreach (GraphicItem gfx in Model.Owner.GetGraphicItems(_helper.CurrentCulture.Id))
                {
                    string clss = i == 1 ? "lc-product-thumb-img lc-product-thumb-img-active" : "lc-product-thumb-img";
                    <lc:graphic item="gfx" class="@clss" id="@Html.Raw("thumb-" + @i)" />

                    i++;
                }
            </div>
        </div>
    </section>
    <section class="d-none d-md-block lc-product-content-wrap" style="width:100%;">
        <lc:bs-card>
            <lc:bs-card-header text="@Model.LocalizedName" />
            <lc:bs-card-description text="@Model.LocalizedDescription" />
        </lc:bs-card>
    </section>
</div>

覆盖：

<div class="container lc-buy-sm-body-wrap">
    <div class="container lc-buy-sm-buy-wrap">
        <div class="container lc-buy-sm-buy-price-wrap">
            <h3 class="text-primary lc-buy-sm-buy-price">
                @Model.Product.PriceRoundedUpFormated
            </h3>
        </div>
        <div class="lc-buy-sm-buy-button-wrap">
            @Html.Partial("/Views/Partials/BuyButton.cshtml", new BuyButtonContextModel() { ButtonClass = "lc-buy-sm-buy-button", NumberClass = "lc-buy-sm-buy-textbox", SubMin = Model.Product.Owner.Min, SubMax = Model.Product.Owner.Max })
        </div>
    </div>
</div>

Answer 1

您可能希望以案例为例

位置：绝对; 左：50％; transform：translate（-50％，0）;

将此css设置为您的子div，并将您的父div设置为position: relative;

＆＃13;

.parent{
    display: block;
    background: red;
    position: relative;
    width: 100%;
    height: 50px;
}

.child{
  display: block;
  background: yellow;
  position: absolute;
  left:50%;
  transform:translate(-50%, 0);
  width:100px;
  height:50px;
}

＆＃13;

<div class="parent">
  <div class="child">
  </div>
</div>

＆＃13;

不能使用margin：auto在父div中居中div

1 个答案: