"Text-align:center;"正しいボタンをページから外します -- css フィールド と text-align フィールド 関連 問題

“Text-align: center;” makes my right button go off the page












0
vote

問題

日本語

私は激しく私の問題をグローブにしてきました、そして私は問題を解決することはできません。

私は、左右の方向ボタンで8つの画像をスクロールするIFrameを作成しました。 i text-align: center; 画像を保持する DIV の場合、右矢印(#leaf2)が消えています。

これは私のHTML、

です。 <事前> <コード> <html> <body> <div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif/></button</div> <div id="image_box"></div> <div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif"/></button></div> </body> </html>

これは私のCSS、

です <事前> <コード> body, p, image{ margin: 0; padding: 0; } button{ background-color: #ffffff; border: 0; } #image_box{ text-align: center; } #image_box img{ border: 1px solid black; } #leaf1{ position: absolute; margin: 155px 0 0 8px; } #leaf2{ position: absolute; margin: 160px 0 0 850px; }
英語

I've been furiously googling my issue and I can't seem to resolve the problem.

I have created and iFrame that scrolls through 8 images with a left and right direction button. When I text-align: center; the DIV that holds the images, the right arrow (#leaf2) dissapears.

Here is my HTML,

<html> <body>  <div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif/></button</div> <div id="image_box"></div> <div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif"/></button></div>  </body> </html> 

Here is my CSS,

body, p, image{     margin: 0;     padding: 0; }  button{     background-color: #ffffff;     border: 0; }  #image_box{     text-align: center; }  #image_box img{     border: 1px solid black; }  #leaf1{     position: absolute;     margin: 155px 0 0 8px; }  #leaf2{     position: absolute;     margin: 160px 0 0 850px; } 
</div
     

回答リスト

1
 
vote

コピー中のエラーだったが、あなたが持っているかどうかわからない &lt; / button&lt; / div&gt;
の代わりに &lt; / button&gt; / div&gt;

また、image_box内の画像を中心にしようとしている場合は、左右のマージンをAUTOに設定する必要があります。そのため:

<事前> <コード> image_box img{ margin: 0 auto; /* or margin-left:auto; margin-right:auto; */ border: 1px solid black; }
 

I'm not sure if this was an error in copying but you have </button</div> instead of
</button></div>

Also, if you're trying to center the images within your image_box, you'll need to set your left and right margins to auto. So:

            image_box img{                 margin: 0 auto; /* or margin-left:auto; margin-right:auto; */                 border: 1px solid black;             } 
</div
 
 
 
 
0
 
vote

ここにいくつかの構文の問題があります:

<事前> <コード> <img src="images/leaf.gif/></button</div>

src 属性と <button> 要素を閉じると、ページは異なるレンダリングを行いますか?

<事前> <コード> <img src="images/leaf.gif"/></button></div>

また、投稿したコードによると、<コード> text-align: center を空のDIVに適用しています。

 

There are a couple of syntax issues here:

<img src="images/leaf.gif/></button</div> 

Does the page render differently when you close the src attribute and the <button> element?

<img src="images/leaf.gif"/></button></div> 

Also note that, according to the code you posted, you are applying text-align: center to an empty div.

</div
 
 

関連する質問

1  Facebookのようなボタンテキストはiframe JavaScriptを整列させます  ( Facebook like button text align iframe javascript ) 
私は私のサイトにボタンのようなFacebookを追加していますが、テキスト整列は右側には行きません。私はそれをどのようにすることができたのかわかりません。 https://developers.facebook.com/docs/reference/plu...

2  HighChartsツールチップテキストの整列  ( Highcharts tooltip text align ) 
私は大チャートを使ってグラフを作成しました。 ツールチップはFFではうまく機能し、すなわち凝視ではテキストがフレーム外に出ます。 HTML を使ってみました <事前> <コード> tooltip: { //Tried this also ...

154  内容をDIVの内側に揃えます  ( Align contents inside a div ) 
CSSスタイルのテキスト整列を使用して、HTMLのコンテナ内の内部を整列させます。コンテンツがテキストか、ブラウザがIEである間は、これはうまく機能します。しかしそれ以外の場合は機能しません。 も、基本的にテキストを合わせるために使用されることを示唆している...

81  jQueryを使用してテキスト整列のためのスタイルを動的に追加する方法  ( How to dynamically add a style for text align using jquery ) 
私はCSS 2.1の周りの通常のIEバグを修正し、カスタムテキスト整列スタイルを追加するための要素スタイルのプロパティを変更する方法が必要です。 現在jqueryにあるのようなことができる <事前> <コード> $(this).width() or $(thi...

6  IEで機能しないCSSを使用しているテキストセンタリング  ( Text centering using css not working in ie ) 
テーブル内のテキストをIEに中央に集中させるように見える問題があります。 Firefox 2,3とSafariすべてがうまく機能しますが、何らかの理由で、テキストはIE 6または7に中心に表示されません。 私は使っています: <コード> h2 { f...

0  IFrameでテキストの整列とfloatを制御します  ( Control text align and float in iframe ) 
私は内部のテキストで450の幅450のIFRAMEを持っています、そして私はiFrameの右側にこのテキストを合わせたいです。 IFrameにアクセスするには、IFrameにアクセスできません。 ...

0  インラインブロックを整列化する方法  ( How to make inline block align right ) 
私は画像を右に揃えようとしていますが、Flex、Text Alignなどを使った試みが繰り返されていません。 すでに多くの質問を見ていますが、満足のいく答えが見つかりませんでした。 <コード> $ s3cmd -r -f -v del s3://my...

0  CSSテーブルのテキスト - 列のある値では機能しない  ( Css table text align not working on some values in column ) 
私は2つの列、変数の値とそれらの値のランキングの値の1つです。ランキング列はうまく機能します。値列のサイズの左および70%に整列しています。ただし、[値]列では、最後の値を除いて、列内のすべての値が右を右に揃えます。この問題は、値の文字数に関連しているようです...

0  ディスプレイを使用して同じラインでヘッダーを整列させる方法  ( How do i align header on the same line using display ) 
display: flex; を使用してオブジェクトを整列させた今、 text-align: justify; const express = require('express'); const app = express(); require("ex...

0  ページの途中でテキストを左揃えにします  ( Left align text in the middle of the page ) 
<事前> <コード> .equiv { margin: auto; display: table; } .equiv .eso { display: table-cell; } コンテナの中心を整列させるためにこれらのスタイルを使用し、その内容...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有