Как выровнять div и холст горизонтально до сетки

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>