ヘッダーの検索を中央配置にするには?

皆さん、こんにちは!

.search-menu.menu-panel-results, .search-menu-container.menu-panel-results {
    width: 600px;
    left: 150px;
}

.floating-search-input .search-banner-inner.wrap .search-menu .search-icon {
    left: 150px;
}

これらのコードをCSSフィールドに追加すると、私が望むように表示されますが、他の人にはそのようには表示されません。
助けていただけますか?
https://pvpfarm.com

Ekran görüntüsü 2024-03-31 132713

こんにちは、親切な友人たちへ。
これを中央揃えにするにはどうすればよいですか?
ログインすると表示が変わります。ログイン後に表示が変わります。
常に中央、同じ位置に表示させたいです。

https://pvpfarm.com

ありがとうございます。:pray:

「いいね!」 1

推測ですが、オフセットは検索メニューボタンとアバターの幅がログインボタンの幅と異なることが原因のようです。

「いいね!」 2

はい、リリー、まさにそれが問題です。この問題に対する解決策を見つけることはできますか?

このトピックと同じ問題ですか?
https://meta.discourse.org/t/how-can-i-center-the-search/301726?u=moin

「いいね!」 2

匿名ユーザーに検索バーが表示されるのはなぜですか? 気にしないでください。今そこにいます。検索バーをクリックするとログインモーダルが表示されると思いましたが、検索はできます…。ちょっと見てみます。

MacBookのChromeで、ヘッダーのボタンが間違ったメニューを開いたり、チャットドロワーを閉じようとするとハンバーガーメニューが開いたりするなど、すべてが非常にバグが多いと感じています。

その理由についての答えはありません。私の推測では、いくつかのSCSSが競合している可能性があります。フォーラムは順調に進んでいますね :slight_smile: - 落ち込まないでください。最初に始めた頃と比較して、あなたのサイトはずっと良くなっています。CSSは経験がないと難しいですし、注意しないとすぐにめちゃくちゃになってしまうことがあります。時間をかけて、ここの#documentationナレッジベースのトピックをいくつか読んでみてください。CSSを簡素化して合理化すれば、問題が解決すると思います。

「いいね!」 3

今とても驚いています :hushed:。私もそのような問題は抱えていません。サイトの言語を翻訳したためにこの問題が発生しているのかもしれません。サイトの主な言語はトルコ語です。

近いうちにMacBookで確認します。

コードを最小限に抑えたいのですが、非常に複雑でした。

管理権限を付与できます。どれほど複雑かを目撃できますよ :sweat_smile:

@media screen and (min-width:640px){
 .d-header .home-logo-wrapper-outlet,
 .d-header .panel{
        width:240px;
 }
}

ちなみにこのコードで問題は解決しましたが、見た目が良くありません。

「いいね!」 3

ヘッダーコンテンツとページコンテンツは互いに独立して中央揃えされるため、例えばヘッダーに左右のコンテンツが多い場合、ヘッダーの中央は異なります。

以下にその例を示します。右側のコンテンツ量に応じてヘッダーの「中央」が変わる例です。



ヘッダーとページコンテンツの中央を常に同じにする簡単な方法はありません。特にヘッダーコンテンツの幅は(翻訳、ボタンの数などにより)変化する可能性があることを考慮すると、なおさらです。

これは、左側のコンテンツ(ロゴ)と右側のコンテンツ(ボタンコンテナ)の幅が同じになったため機能します。右側に表示されるボタンが異なるため、.anon(ログアウト状態)を対象とするには、別途CSSが必要です。ご指摘の通り、翻訳によってボタンのサイズも変わるため、配置に影響します。

「いいね!」 4

スクリーンショット付きで説明してくれた @awesomerobot さん、ありがとうございます。とても分かりやすかったです。 :hugs:

@media screen and (min-width:640px){
 .d-header .panel{
  margin-left:-66px;
 }
}

このように試していますが、テトリスのヘビゲームのように、画面上を二つが追いかけ合っているような状態です。 :sweat_smile:

解決策


/* arama search bar ortalama */
@media screen and (min-width:640px){
 html:not(.anon) .d-header .panel {
   margin-left: 95px;
    }
}

.floating-search-input-wrapper {
    margin-right: -35px;
}
/* arama search bar ortalama */

ピクセルはお好みで調整してください。

「いいね!」 1