Question

我有一个中心div，我希望将图像和图像对齐文字如下： -

 __________________________________________
|                                          |
|Image         Description          Status |
|__________________________________________|

图像，图像描述＆amp;状态（ON / OFF）

1＆GT;我试图在左边和左边放垫子。正确的两个＆amp;向左浮动＆amp;正确的文字，但我仍然无法正确对齐它们。如果我没有放置float属性，那么图像描述将出现在图像下。

2 - ; div的整行也是＆lt;＆gt;其中包含 - 图像，描述，状态 - 这个完整的dix延伸到右边，unnessarly扩展整个gui宽度。我在附加图片中用箭头显示了扩展宽度。

我缺少的是在不增加GUI宽度的情况下正确对齐所有三个图像，描述，状态。？

代码：---

<!DOCTYPE html>
<html style="height: 100%;">

<head>
<style>
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
}
.input {
    display: inline-block;
    padding: 0 2px;
}
.input input {
    display: block;
}
.imgtxt {
    margin: 0;
    font-family:arial;
    color:#DDDFED;
    font-size:15px;
}
#images {
    background-color:#888686;
    white-space:nowrap;
}
div.scrollable {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableMenu {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableCenter {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}


#Menu {
    background-color:#292B3B;
    position:absolute;
    top:124px;
    bottom:20px;
    left:0;
    width:217px;
}
#center {
    background-color:#292B3B;
    position:absolute;
    top:124px;
    left:200px;
    right:0px;
    bottom:20px;
}
#fotter {
    background-color:#CC99FF;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}
</style>
</head>

<body >
    <div id="images" class="scrollable">
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-1</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-2</p>
            <hr style="border-color:#DDDFED; background-color:#00FF00;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-3</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-4</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-5</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-6</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-7</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-8</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-9</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-10</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-11</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-12</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-13</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-14</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-15</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-16</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-17</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-18</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Keypad-19</p>
            <hr style="border-color:#DDDFED; background-color:#DDDFED;align="left";width="80px"; size="4px";">
        </div>
    </div>
    <div id="Menu" class="scrollableMenu">
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" hspace="10"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-1</p>
        </div >
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-2</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-3</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-4</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-5</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-6</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Left-7</p>
        </div>
        <hr/>
    </div>
    <div id="center" class="scrollableCenter">
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" hspace="10"/>
            <p class="imgtxt" style="padding-top : 20px; padding-left : 100px;float:left;">Center-1</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div >
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 300px; float:right;">Center-2</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Center-3</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div>
        <hr/>
        <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Center-4</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Center-5</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Center-6</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div>
        <hr/>
    <div >
            <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">Center-7</p>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 10px; float:right;">OFF</p>
        </div>
        <hr/>
    </div>
    <div id="fotter">Copyright © 2014 My First Layout</div>
</body>
</html>

图片：---
enter image description here

Answer 1

首先定义图像描述和状态的宽度...然后你给出填充或边距然后你给float：left;最后你清楚了两个属性 EX

Answer 2

我相信你想要实现的目标

http://jsfiddle.net/FeJdD/

这个代码

<div id="center">
            <input class="image" type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" hspace="10"/>
            <span class="imgtxt imageDesc" style="">Center-1</span>
<span class="imgtxt imageStatus" style="">Right</span>
</div>

和css

#center{
    background-color: #fff;
    width: 99%;
    display: block;
    text-align: center;
    overflow: hidden;
    padding-bottom: 10px;
}

#center .image{
    padding-top:5px;
    float:left;
}

#center .imageDesc{
    padding-top:20px;
    text-align:center;
    display: inline-block

}

#center .imageStatus{
    padding-top:20px;
    padding-right:5px;
    float:right;
}

希望这能解决您的问题

对齐和图像文本 - HTML div

2 个答案: