Środkowy środek między środkowym i lewym

Mam logo wyrównywane w środku, a kiedy dostosowuję szerokość ekranu/okna, pozostaje idealnie w centrum. Po lewej stronie logo Mam małe menu z tylko dwoma słowami, chcę, aby to menu/div zawsze było pomiędzy logo a lewą krawędzią.Środkowy środek między środkowym i lewym

Czy można to zrobić tylko przy użyciu CSS?

Należy wziąć pod uwagę, że logo ma własną szerokość 200px, ale mogę to naprawić z margin-left: -100px;. A jeśli chodzi o rozmiar ekranu, który nie pasuje już po lewej stronie, umieszczę go pod logo z numerem @media screen and (max-width: px) { ... }.

Jak to: http://postimg.org/image/v148gyc9b/

Źródło

2015-01-18 Fredrik

Jeśli logo ma stały rozmiar 200px, można spróbować coś takiego:

#menu { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: calc(50% - 100px); 
}

Źródło

2015-01-18 00:39:17 Franz

Tak. Potrzebowałem tylko szerokości: calc (50% - 100px) dla menu, i mogłem usunąć margines po lewej: -100px; Miałem za logo! Przetestuję to nieco, ale wygląda na to, że powinno działać! Każdy pomysł na temat przeglądarki obsługuje calc? Dziękujemy! – Fredrik

Możesz sprawdzić obsługę przeglądarki tutaj: http://caniuse.com/#search=calc – Franz

Powiedzmy, że masz ten HTML:

<div class="header"> 
    <div class="menuContainer"> 
     <div class="menu"> 
      Menu 
      <!-- Your Menu here --> 
     </div> 
    </div> 
    <div class="logo">Logo</div> 
</div>

Twoje logo ma szerokość statyczną i nie chcesz, aby było ono procentową szerokością, więc możesz zrobić .menu zajmij miejsce pl logo i lewej krawędzi z tym CSS:

.menuContainer { 
    width: 50%; 
    padding: 0 50px; /* 50 is (logoWidth/4) */ 
    margin-left: -50px; /* 50 is (logoWidth/4) */ 
    margin-right: -50px; /* 50 is (logoWidth/4) */ 
    box-sizing: border-box; 
    position: relative; 
    float: left; 
}

Nie zapomnij zmienić tę „50px” po zmianie szerokości logo z zapytaniami mediów.

Oto przykład praca w JSFiddls: http://jsfiddle.net/3047kfkn/

Źródło

2015-01-18 04:28:20

Środkowy środek między środkowym i lewym

Odpowiedz

Powiązane problemy