Question

我想将两个图像居中放在屏幕中间但不希望它们相互碰触。这是一个学校项目，我对HTML和CSS不是很有经验，所以如果你能帮助我，那将是惊人的！我的老师告诉我要创建那些展示桌，但我不明白它们是如何工作的，所以如果你还能给我一个如何工作的提示我会很感激！提前致谢！如果您需要我发送任何其他信息，请告诉我，因为除了我上面所说的以外，我不确定要放在哪里。

HTML code：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Correia e Figueiredo</title>
        <link rel="stylesheet" href="css/index.css" type="text/css"/>
        </head>
    <body>
    <div id="imagens">
        <div id="Morph1" class="images">
            <a href="figueiredo.html"> <img src="images/Morph1.png"> </a>
            </div>
            <div id="Morph2" class="images">
            <a href="figueiredo.html"> <img src="images/Morph2.png"> </a>
            </div>
    </div>
    </body>
</html>

CSS代码：

`*{
    margin:0;
    padding:0;
}

body{
    background-color: beige;
}

#imagens {
    display: table;
}

#Morph1 {
    display: table-cell;
}


#Morph2 {
    display: table-cell;
}

.images a img {
    border-radius: 100%;
    width: 30%;
    margin: 0 auto;
    text-align: center;
}

.images {
    text-align: center;
    width:50%;
}`

Answer 1

试试这个

.modal {
    padding-bottom: 600px;
    padding-left:40px !important;
    max-width:400px !important;
    position:fixed;

}
.bootbox{
     max-width:400px !important;
}

body.viewport-lg {

position: relative;
}
body {  
 overflow-x: hidden;
 overflow-y: scroll !important;
}
body.modal-open {

overflow: hidden;
position: fixed;
}

Answer 2

在padding和#Morph1上使用#Morph2即可完成此任务。

就像：

#Morph1 {
    display: table-cell;
    padding: 0 10px;
    text-align: right;
}


#Morph2 {
    display: table-cell;
    padding: 0 10px;
    text-align: left;
}

请看下面的代码：

*{
    margin:0;
    padding:0;
}

body{
    background-color: beige;
}

#imagens {
    display: table;
}

#Morph1 {
    display: table-cell;
    padding: 0 10px;
    text-align: right;
}


#Morph2 {
    display: table-cell;
    padding: 0 10px;
    text-align: left;
}

.images a img {
    border-radius: 100%;
    width: 30%;
    margin: 0 auto;
    text-align: center;
}

.images {
    text-align: center;
    width:50%;
}

<div id="imagens">
        <div id="Morph1" class="images">
            <a href="figueiredo.html"> <img src="http://lorempixel.com/400/400"> </a>
            </div>
            <div id="Morph2" class="images">
            <a href="figueiredo.html"> <img src="http://lorempixel.com/400/400"> </a>
            </div>
    </div>

希望这有帮助！

Answer 3

QString("SELECT * from main.sell_cash_log WHERE 'when' >= '%1' AND 'when' <= '%2'").arg(ui->fromdate->dateTime().toString("dd-MM-yyyy:HH-mm-ss")).arg(ui->todate->dateTime().toString("dd-MM-yyyy:HH-mm-ss"))

arrival_delayed_weather = [[[flight_data_finalcopy["ArrDelay"] > 0]] & [[flight_data_finalcopy["WeatherDelay"]>0]]]
arrival_delayed_weather_filter = arrival_delayed_weather[["UniqueCarrier", "AirlineID"]]
print arrival_delayed_weather_filter

链路： - https://jsfiddle.net/ghnthrbn/

我希望以响应的方式将2张图像居中

3 个答案: