Question

我现在已经把头发拉了几天（剩下的了）。我已经看到并尝试在SO＆amp; S上实施各种解决方案。其他谷歌搜索，可悲无济于事。

我试图将div垂直居中于另一个使用flex定位的div中。这个div的孩子也应该居中。

我试图保持宽度＆amp;高度尽可能响应，此页面将用作各种高分辨率显示器上的仪表板。

类似问题 - 我知道这里有一个非常类似的问题： Vertical align fluid div within another fluid div。我试图在我的解决方案中实施，但它似乎没有什么区别。 https://jsfiddle.net/AndyMeFul/Luc53a6t/

HTML：

def appending(appending_list = []):
    print("Please type EOF when you want to stop!")
    while True:
        c = input("Please enter EOF to stop adding. Please enter a choice: ")
        if(c=="EOF"):
            break
        else:
            appending_list.append(c)
    print("You have inserted {} choices".format(len(appending_list)))
    print("Please verify them below: ")
    for x in range(0, len(appending_list)):
        print(appending_list[x])
    return appending_list

def removing(removing_list = []):
    print("Following are choices: ")
    r = input("What do you want to remove? ")
    removing_list.remove(r)
    print("{} successfully removed!".format(r))
    return removing_list

print("We will have to make a list of choices")
choosing_list = appending()
list_incomplete = True
while list_incomplete:
    confirm = input("Is your list complete?[Y/N]")
    if(confirm == "Y"):
        print("Yaay! Choices creation complete."
              "{} choices have been added successfully".format(len(choosing_list)))
        list_incomplete = False
    elif(confirm == "N"):
        action = input("What do you want to do? [Append/Delete]")
        if(action == "Append"):
             choosing_list = appending(choosing_list)
        elif(action == "Delete"):
            choosing_list = removing(choosing_list)

CSS：

<div id="widget-container">
<div id="widget-one" class="widget widget-prio">
    <div class="widget-header">Big Widget</div>
    <div class="widget-content-container">
        <div class="widget-textblock widget-textblock-prio">Vertically Center Me..</div>
        <div class="widget-textblock">Also me..</div>
    </div>
</div>
<div id="widget-two" class="widget">
    <div class="widget-header">Small Widget</div>
    <div class="widget-content-container">
        <div class="widget-textblock">And I.</div>
    </div>
</div>
<div id="widget-three" class="widget">
    <div class="widget-header">Empty Widget</div>
</div>

JSFiddle： https://jsfiddle.net/AndyMeFul/bLmy3ngq

Answer 1

不可否认，我不是flex的专家，但我认为我能够得到你想要的东西。关键是将height: 100%（以及其他一些更改）添加到.widget-content-container，但我不确定为什么位置合适的align-items: stretch无法正常工作。

＆＃13;

body {
    font-family: sans-serif;
    background-color: lightseagreen;
    margin 0;
}
#widget-container {
    display: flex;
    position: fixed;
    top: 30px;
    right: 0;
    bottom: 15px;
    left: 0;
}
.widget {
    display: flex;
    flex-direction: column;
    margin: 15px 15px 0;
    background-color: white;
    border: solid 1px black;
}
.widget-prio {
    flex-grow: 3;
}
.widget-header {
    padding: 10px 0;
    width: 100%;
    text-align: center;
    background-color: skyblue;
}
.widget-content-container {
    display: flex;
    background-color: lightgrey;
    padding: 5px;
    height: 100%;
}
.widget-textblock {
    flex-grow: 1;
    text-align: center;
    align-self: center;
}
.widget-textblock-prio {
    flex-grow: 3;
}

＆＃13;

<div id="widget-container">
    <div id="widget-one" class="widget widget-prio">
        <div class="widget-header">Big Widget</div>
        <div class="widget-content-container">
            <div class="widget-textblock widget-textblock-prio">Horizontally Center Me..</div>
            <div class="widget-textblock">Also me..</div>
        </div>
    </div>
    <div id="widget-two" class="widget">
        <div class="widget-header">Small Widget</div>
        <div class="widget-content-container">
            <div class="widget-textblock">And I.</div>
        </div>
    </div>
    <div id="widget-three" class="widget">
        <div class="widget-header">Empty Widget</div>
    </div>
</div>

＆＃13;

垂直对齐div中的div

1 个答案: