Question

我制作了一个CMS，允许用户使用编辑器并拖放图像以及文本和格式。

我让它们使用不同的模板，下面的示例使用一个在页面的右半部分具有较大内容区域，在左上和左下具有较小内容区域的模板。

图像很好，但是正如您在摘要中所见（您必须运行它并全屏显示以了解我的意思），即使我的bottomLeftContent和rightContent区域p标签和text-align: center的右边，它们都浮动在左边。

现在，如果我检查页面并关闭display:flex的中间p，则它们会正确对齐，但是却弄乱了我的页面应如何显示（不滚动，因此区域需要按原样堆叠在一起）

如何保持显示柔韧性但允许内联p样式起作用？（另外，p标签中的内容来自TinyMCE编辑器，因此我不能对重要的东西进行硬编码！

html,
body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.middle p{
    max-height:100%;
    margin-bottom:0;     
    position: absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0;
    display:flex;
}

img {
    object-fit: scale-down;
    width: 100%; 
    margin:0 auto;
}

#topLeftContent{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
    height:100%;
}

#topLeftContent img{
    object-fit: contain;
}

.topLeftContent{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

.topLeftContent> img{
    min-width:100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

#bottomLeftContent{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
    height:100%;
    background-color: blue;
}

#bottomLeftContent img{
    object-fit: contain;
}

.bottomLeftContent{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

.bottomLeftContent> img{
    min-width:100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

#rightContent{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow: hidden;
    height:100%;
}

#rightContent img{
    object-fit: contain;
}

.rightContent{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

.rightContent> img{
    min-width:100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

.my-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width:100vw;
}

.my-container .top.row, 
.my-container .row.bottom {
    flex-shrink: 0;
}

.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
    background-color: #778899  ;
    color: white;
    text-align: center;
}

.my-container>.middle {
    flex-grow: 1;
    padding:30px;
    background-size: cover;
}

<html>
<body>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    
    <div class="container-fluid my-container">
        
        <div class="row top">
            <div class="col-lg-12">
                <div class="row" style="background-color: #778899;">
                </div>
            </div>
        </div>
        
        <div class="row middle">
            
            <div class="col-lg-6"  >
                <div class="row" style="height:50%; padding-bottom: 15px;">
                    <div class="col-lg-12" style="height:100%;">
                        <div class="topLeftContent" id="topLeftContent">
                            
                            <p><img class="mySlides" src="images/Picture1.jpg" /></p>
                        </div>
                    </div>
                </div>
                <div class="row flex-center--horiz" style="height:50%; padding-top: 15px; background-color: tomato;">
                    <div class="col-lg-12" style="height:100%;">
                        <div class="bottomLeftContent" id="bottomLeftContent">
                            <p style="text-align: center; color: white;">SHOULD BE CENTERED</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6" >
                <div class="rightContent" id="rightContent">
                    
                    <p style="text-align: right;">Paragraph over here</p>
                </div>
            </div>
        </div><!--end row middle-->
        
        <div class="row bottom">
            <div class="col-lg-12">
                <div><h2>Ticker</h2></div>
            </div>
        </div>
        
    </div>
    
</body>
</html>

显示Flex不允许内联文本对齐和样式

0 个答案: