Question

我已成功设法在容器ul内垂直对齐div。

我的问题是如何垂直对齐垂直对齐的img旁边的ul。

HTML

<div id="container">
<div style="float: left;">
<img src="logo.png" style="height: 50px;" />
</div>
<ul>
<li>Example</li>
<li>Example</li>
</ul>
</div>

CSS

#container {
 display: table;
 background: red;
}

#container ul {
 display: table-cell;
 vertical-align: middle;
}

#container li {
 display: inline;
 vertical-align: middle;
}

Jsfiddle：https://jsfiddle.net/q1dy3zqk/2/

Answer 1

您可以尝试使用display:flex;

#container {
 display: table;
 background: red;
 display:flex;
 justify-content:center;
 align-items:center;
}

#container ul {
 display: table-cell;
 vertical-align: middle;
}

#container li {
 display: inline;
 vertical-align: middle;
}

<div id="container">
<div>
<img src="http://lorempixel.com/100/50" style="height: 50px;" />
</div>
<ul>
<li>Example</li>
<li>Example</li>
</ul>
</div>

Answer 2

您可以尝试使用 display：flex 和 align-items：center

＆＃13;

import os
import jinja2
import webapp2

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
    extensions=["jinja2.ext.autoescape"],
    autoescape=True)

class ConsumoHandler(webapp2.RequestHandler):
     def load_input(self):
        self.km=float(self.request.get("edKm","edKm"))
        self.consmed=float(self.request.get("edCons","edCons"))
        self.tiempo=float(self.request.get("edTiempo","edTiempo"))
        self.velMed=0
        self.consTot=0

    def post(self):
        self.load_input()
        self.km=str(self.km)
        self.consmed=str(self.consmed)
        self.tiempo=str(self.tiempo)
        velMed=(self.km)/(self.tiempo)
        self.velMed=str(velMed)
        consTot=(self.km)/((self.consmed)*4)
        self.consTot=str(consTot)

        template_values = { 
        'kmToStr':self.km,
        'consmedToStr':self.consmed,
        'tiempoToStr':self.tiempo,
        'velMedToStr':self.velMed,
        'consTotToStr':self.consTot, 
        }

    template_values = JINJA_ENVIRONMENT.get_template("answer.html")
    self.response.write(template.render(template_values));

app = webapp2.WSGIApplication([
    ('/calcu', ConsumoHandler)
], debug=True)

＆＃13;

#container {
 background: red;
 display: flex;
 height: 300px;
}
.image{
  display: flex;
  align-items: center;
}
#container ul {
 align-items: center;
 display: flex;
}

#container li {
 display: inline;
 vertical-align: middle;
}

＆＃13;

div内的ul旁边的垂直对齐图像

2 个答案: