Meu Tédio - SoundSage

Para alinhar imagens em seu site, o ideal é criar antes as classes na folha de estilos. Isso simplifica o trabalho porque um alinhamento bem feito nunca tem apenas uma propriedade. Quando você flutua uma foto à esquerda, por exemplo, precisa também definir as margens direita e inferior para que o texto não fique grudado à imagem.

.CSS Para flutuar à esquerda:

.left {float:left; margin-left:0; margin-right:10px; margin-bottom:5px;} Para flutuar à direita:

.right {float:right; margin-right:0; margin-left:10px; margin-bottom:5px;} Para centralizar:

.center {float:none; display:block; margin-left:auto; margin-right:auto;} Exemplo de imagem centralizada:

Descreva a imagem

Exemplo de imagem flutuando à direita:

Descreva a imagem

Exemplo de imagem flutuando à esquerda:

Descreva a imagem

Mais de uma imagem centralizada:

Você pode:

Mudar os nomes das classes, cuidando para mudar tanto na folha de estilos quanto no código HTML.
Acrescentar outras declarações às classes.
Usar essas mesmas classes para centralizar ou flutuar outros elementos em bloco. Exemplos: </strong>, <strong><video></strong>, <strong><audio></strong> e <strong><object></strong>.</li> </ul> <p>Até mais!</p> <p>Foto: Astrologia Cármica</p> <p>Artigo exclusivo do Meu Tédio, blog da Helen Fernanda. Reprodução proibida.</p> </div> <div class="listen"> <p><a href="/podcast/1566500/meu-t-dio/episodes/">See All 64 Episodes of "Meu Tédio"</a></p> </div> </div> </div> </div> <div class="episodes"> </div> </div> <footer class="footer"> <ul class="nav-menu"> <li class="nav-item"><a href="mailto:jasonlustig@gmail.com">Contact</a></li> <li class="nav-item"><a href="podcasters/">For Podcasters</a></li> <li class="nav-item"><a href="api/">API</a></li> </ul> </footer> <script type="text/javascript" src='/static/jquery/dist/jquery.min.js'></script> <script type="text/javascript" src='/static/typeahead.js/dist/bloodhound.js'></script> <script type="text/javascript" src='/static/typeahead.js/dist/typeahead.bundle.js'></script> <script type="text/javascript" src="https://unpkg.com/swiper@8/swiper-bundle.js"></script> <script type="text/javascript" src="https://unpkg.com/jsrender@1.0.11/jsrender.min.js"></script> <script type="text/javascript"> function twitterUsernameKeyUp(e) { if (e.keyCode == 13) { submitTwitterUsername(); return false; } return true; } function submitTwitterUsername() { search = document.forms["twitter_search"]; var username = search.twitter_handle.value; if (username == '') { return; } var url = 'twitter/'+username+"/"; window.location.href = url; } function searchQueryKeyUp(e) { if (e.keyCode == 13) { document.forms["search"].submit(); } }; function runSearchQuery() { search = document.forms["search"]; if (search.search_query == '') { return; } var url = 'search/'; /* if (search.search_for.value == "episodes") { url += 'episodes/'; } */ url += '?search_query='+escape(search.search_query.value) url += '&language='+escape(search.language.value); url += '&safe_search='+escape(search.safe_search.value); if (search.number_episodes) { url += '&number_episodes='+escape(search.number_episodes.value); } if (search.date) { url += '&date='+escape(search.date.value); } window.location.href = url; /* if (search.location) { url += '&location='+escape(search.location.value); if (search.location.value != 'any' && navigator.geolocation) { navigator.geolocation.getCurrentPosition(position => { const lat = position.coords.latitude; const long = position.coords.longitude; url += '&latitude='+escape(lat); url += '&longitude='+escape(long); window.location.href = url; }, error => { search.location.value = 'any'; }); } else { window.location.href = url; } } else { window.location.href = url; } */ } var lastSearchPodcasts; var lastSearchEpisodes; var searchPodcasts = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, cache: false, remote: { url: 'autocomplete/?query=', wildcard: '%QUERY', prepare: function (query, settings) { settings.url = settings.url + encodeURIComponent(query); settings.beforeSend = function(e) { if (lastSearchPodcasts) { lastSearchPodcasts.abort(); } lastSearchPodcasts = e; }; return settings; }, rateLimitBy: 'throttle', rateLimitWait: 800 } }); $('.typeahead').typeahead({ minLength: 5, highlight: true }, { name: 'podcast-search', display: 'title', limit: 'Infinity', source: searchPodcasts, templates: { empty: function() { if ($('.typeahead')[1].value.length >= 3) { return '<div class="empty-message"><p class="search-result"><b><a href="#" onclick="document.forms[\'search\'].submit()">No podcasts match this <i>exact</i> term, see all results</a></b></p></div>'; } }, suggestion: function(data) { return "<p class='search-result' style='text-align: left !important;'><table width='100%'><tr><td><img src='static/podcast/"+data.image+".jpg' width=50 height=50 /></td><td width='100%' valign='middle' align='left'>" + data.title + "<br /><small><i>"+data.author+"</i></small></td></tr></table></p>"; }, header: function() { return '<p class="search-result" style="width: 100%; height: 2.5rem; vertical-align:middle; text-align: center !important;"><a href="#" onclick="document.forms[\'search\'].submit()">Search All Results</a></p>' } } }) .on('typeahead:selected', function(event, data) { console.log(data); slug = data.title.replace(/[^a-z0-9]/gmi, "-").replace(/\s+/g, "-").toLowerCase(); if (data.podcast_id) { slug_podcast_title = data.podcast_title.replace(/[^a-z0-9]/gmi, "-").replace(/\s+/g, "-").toLowerCase() window.location.href = 'podcast/'+data.podcast_id+'/'+slug_podcast_title+'/episode/'+data.id+'/'+slug+'/'; } else { window.location.href = 'podcast/'+data.id+'/'+slug+'/'; } } ); </script> <script type="text/javascript"> const hamburger = document.querySelector(".hamburger"); const navMenu = document.querySelector(".nav-menu"); hamburger.addEventListener("click", mobileMenu); function mobileMenu() { hamburger.classList.toggle("active"); navMenu.classList.toggle("active"); } </script> <script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js" crossorigin></script> <script> const sectionsWithCarousel = document.querySelectorAll( ".section-with-carousel" ); for (const section of sectionsWithCarousel) { let slidesPerView = [2.5, 3.5, 4.5]; if (section.classList.contains("section-with-left-offset")) { slidesPerView = [1.5, 1.5, 2.5]; } const swiper = section.querySelector(".swiper"); new Swiper(swiper, { slidesPerView: slidesPerView[0], spaceBetween: 0, loop: true, lazyLoading: false, preventClicks: false, preventClicksPropagation: false, keyboard: { enabled: true }, navigation: { prevEl: section.querySelector(".carousel-control-left"), nextEl: section.querySelector(".carousel-control-right") }, pagination: { el: section.querySelector(".swiper-pagination"), clickable: true }, breakpoints: { 768: { slidesPerView: slidesPerView[1] }, 1200: { slidesPerView: slidesPerView[2] } } }); } </script> </body> </html>