如何将div和canvas水平对齐到网格

Question

是否有一些有用的技巧？

Here is the fiddle

对于文本居中我试图用这样的：

.wrapper div { 
    position: relative; 
    top: -8px; 
} 

要卸下底部帆布缘我试图用这样的：

.wrapper canvas { 
    margin-bottom: -5px; 
} 

但我总是尽量避免负面参数。

Answer 1

你的意思是垂直对齐吗？喜欢这个？

.wrapper { 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
} 
 
.wrapper div { 
 
    border: 1px solid blue; 
 
    display: inline; 
 
    margin-left: 10px; 
 
} 
 
.wrapper canvas { 
 
    border: 1px solid red; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="wrapper"> 
 
    <canvas width="32" height="32"></canvas> 
 
    <div class="question">1234567890</div> 
 
</div>

Answer 2

这是你的意思？

canvas { 
    float: left; 
} 

Answer 3

您可以使用此代码为水平设计

<style> 
.wrapper { 
    border: 1px solid green; 
    float:left; 
} 
.demo_class{ 
    display: inline-block; 
    float: left; 
} 
.demo_class .question{ 
    height: 32px; 
    line-height: 32px; 
} 

<div class="wrapper"> 
<div class="demo_class"> 
    <canvas id="null" width="32" height="32" style="border:1px solid red;"></canvas> 
</div> 

<div class="demo_class"> 
    <div class="question">1234567890</div> 
</div>