2

下のテキストと画像を同じ行の中央に配置する必要があります。jqueryでdata-role="header"関数を使用していますが、すべてを1行で中央に配置できないようです。CSSはJqueryの標準です

    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>jQuery</title>
                <link rel="stylesheet" href="themes/scavenger-hunt.min.css" />
            <link rel="stylesheet" href="Publish/jquery-mobile/jquery.mobile.structure-1.0.min.css" />
            <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
        <body> 

<div data-role="page" id="home">
    <div data-role="header">
    <h1>Scavenger</h1><img src="images/logosh.png" alt="logo" width="50" height="50" align="absmiddle"><h1>Hunt</h1> 
</div>
4

2 に答える 2

0

ヘッダーを2つの別々の要素に分割しないことを強くお勧めし<h1>ます。これは不要であり、あまり正しくないためです：P

このHTMLコードを使用してみてください。

<h1>
    Scavenger
    <img src="http://placehold.it/50x50" alt="logo" width="50" height="50" align="absmiddle">
    Hunt
</h1>

そしてこのCSS：

h1 {
    text-align: center;
}
于 2013-02-23T21:22:34.643 に答える
0

h1を最初に配置し、次に画像をhtmlの最後に配置すると、cssは次のようになります。

 #home > div h1:first-child {float:left}
#home > div h1 {float:right}
img {display:block; margin-left:auto; margin-right:auto;}

これがフィドルですhttp://jsfiddle.net/tbd5f/1/

于 2013-02-23T21:16:06.160 に答える