0

デモ： http： //jsfiddle.net/57M68/。フロート、マージン、パディングなど、さまざまなことを試しましたが、テキストボックスを黒い帯の中央に垂直に揃えることができません。助けてください。コード：

html：

<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
 <div id="top_bar">
 <div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
 <div class="logo">

 </div>
</a>
<div style="display:inline-block"> <input type="text" ></input></div>
</div>

</div>
 <div id="top_bar_divider"></div>
 <div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
   <div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
  </div>
 </div>
</body>

js：

require([
  "dijit/dijit",
  "dojo/parser",
  "maqetta/space",
  "maqetta/AppStates",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/form/TextBox"
]);

css：

html,body {
    height: 100%;
    width: 100%;
}

 .logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
}
.logo_a:active{
background-position:0 1px;
}

#top_bar{
    padding:0px; 
    background: -webkit-linear-gradient(#464646, #121212);
    background: -moz-linear-gradient(#464646, #121212);
    background: -ms-linear-gradient(#464646, #121212);
    background: -o-linear-gradient(#464646, #121212);
    background: linear-gradient(#464646, #121212);
    color: #ccc;
    text-shadow:none;
    height:50px;
    width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}
4

2 に答える 2

0

vertical-align: middle入力divと.logo_a：に追加する必要があります。

.logo_a {
    background:url("icon1.png");
    vertical-align: middle;
}

http://jsfiddle.net/57M68/1/

于 2013-03-24T20:56:12.587 に答える
0

HTMLは次のようになります

<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-         ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">

</div>
</a>
<div id="text"> <input type="text"></div>
</div>

</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true"   style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-  left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false"   preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>

そして、cssが既存のデモに追加されます--

#text{display:inline;}
#text input{position:relative;
top:-43px;
left:110px;}
于 2013-03-24T21:05:21.057 に答える