Codelab: CSS'de ortalama

Adam Argyle

Bu codelab, CSS'de en sevdiğiniz merkezleme yöntemini paylaşmanıza ve göstermenize olanak tanır.

CSS'de en sevdiğim 5 merkezleme yöntemi hakkında bilgi edinmek için CSS'de merkezleme başlıklı blog yayınıma göz atın. Dilerseniz bu videoyu da izleyebilirsiniz.

Kurulum

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
2. app/index.html uygulamasını aç
3. line 23 alanında /* your centering CSS here /* ifadesini CSS'nizle değiştirin.
4. (isteğe bağlı) Ortalama tekniğinizi adlandırın ve <h1>

Stiller

1. app/css/ klasöründe yeni bir dosya oluşturun
2. Merkezleme çözümünüzü barındıracak bir seçici oluşturun (ör. .turbo-center veya [floaty-mcfloat])
3. Bu yeni seçicide, merkezleme tekniğinizi yazın (örnek olarak app/css/'teki diğer seçicilere göz atabilirsiniz)
4. (isteğe bağlı) hangi çocukların merkezlemeyi desteklemek için stillere ihtiyacı olduğunu görebilmemiz için bazı "destek stilleri" yazın
5. app/css/index.css dosyasını açın ve alt kısımda yeni dosyanızı içe aktarın

Tümünü bir araya getirin

1. app/index.html dosyasını tekrar aç
2. <article> öğesini bulun ve önceki bölümün 2. adımında oluşturduğunuz özel seçicinizi ona verin.
3. Glitch'inizi tweetleyin. Blog yayınında yer almasını istiyorsanız lütfen bunu yapın.