What is the best way to ensure that the item beneath two images is always centered in HTML5?

When designing a webpage with text and images, it's important to consider the layout on different screen sizes. To avoid text wrapping under images, adjusting the spacing around the image is sometimes necessary.

Similarly, when embedding a video, centering it on the screen can be a challenge. If there isn't enough text above the video, it may not be centered properly. This can be seen in the screenshot https://i.sstatic.net/xMbnt.jpg

Ensuring that the video is always centered, regardless of the amount of text, can be tricky. The length of the text may vary for different languages, and adjusting the image border for each language is not ideal.

Below is an example of HTML code:

<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understands Classical</h2>
<p>SongKong understands Classical music. The Metadata demands for Classical are very different to Pop/Rock music, credit is usually given to not only the performer but also the
conductor, orchestra and composer. In Pop/Rock an album usually represents the artistic intent of the artist, i.e. the album was conceived
and created as a single body of work. In Classical it is more complicated, Classical composers work in terms of Symphonies or Sonatas
rather than albums, we call these Works. These works comprise sub works or movements, and there may be additional levels. When Classical music is released as an album it may only contain part of a
work, or conversely multiple works, so the album grouping may not be the most important grouping.
SongKong identifies Classical releases and captures this additional information in dedicated metadata fields.
It can also identify other Classical information such as the Opus No and the performers with their instruments. SongKong can automtically update the new iTunes Work and Movement fields.
</p>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>

And the corresponding CSS:

 .section_image {
        height: auto;
    }
    .Section {
            clear:both;
            padding-top:50px;
            padding-bottom:50px;
    }

    .align_left {
        float:left;
        margin-right:20px;
        clear:both;
    }

    .align_right {
        float:right;
        margin-left:20px;
        clear:both;
    }

  .videowrapper iframe {
        margin: 0 auto;
        display:table;
        width: 500px;
        height: 300px;
    }

Answer №1

Here's a suggestion for handling Classical music metadata:

<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understanding Classical Music</h2>
<p>When it comes to Classical music, the way metadata is handled differs significantly from Pop/Rock music. In Classical music, credit is typically given to not only the performer but also the conductor, orchestra, and composer. While in Pop/Rock, an album typically represents the artist's artistic vision, in Classical music, composers work in terms of Symphonies or Sonatas rather than albums. This means that Classical music releases may contain only part of a work or multiple works, making the album grouping less significant. SongKong is able to identify Classical releases and capture this additional information in dedicated metadata fields. It can also recognize Classical-specific information such as Opus numbers and the performers and their instruments. SongKong can even automatically update the new iTunes Work and Movement fields.
</p>
<div class="clear-fix"></div>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>


.section_image {
        height: auto;
    }
    .Section {
            clear:both;
            padding-top:50px;
            padding-bottom:50px;
    }

    .align_left {
        float:left;
        margin-right:20px;
        clear:both;
    }

    .align_right {
        float:right;
        margin-left:20px;
        clear:both;
    }

  .videowrapper iframe {
        margin: 0 auto;
        display:table;
        width: 500px;
        height: 300px;
    }

    .clear-fix {
      clear: both;
    }

See a live example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving information from emails, yet providing disorganized text fragments

I have developed a method to remove html, style/script tags, and new line tags from the source code of email pages: def extract_message(url): markup = open(url) soup = BeautifulSoup(markup, "html.parser") for script in soup(["script", "style"] ...

Issue with border in Bootstrap Grid Navigation Bar

I've experimented with margins, padding, and border options extensively, but I still can't get rid of the white space at the end of my navbar. Can anyone provide a simple solution, please? See the attached image for a clear visual of the issue. T ...

Opening a dynamically generated HTML file in a separate window in Flutter web

I am facing an issue with the url_launcher package while attempting to open a link using the following code snippet: try { final Uri launchUri = Uri.dataFromString( '<html><body>hello world</body></html>', ...

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...

Implementing a feature that ensures html elements are transparent in a PDF conversion

I am in the process of converting a webpage into a format that is easily printable as a PDF, while ensuring that it maintains the same appearance. Many tools for printing to PDF do not support background images or colors, so I am attempting to overcome thi ...

What is the best way to activate a submit button when at least one checkbox is selected?

I checked out Mark's solution on Stack Overflow regarding disabling a button if no checkboxes are selected in Angular2. However, I have more than one array to consider. How can I adjust the code provided in the link for my situation? Alternatively, d ...

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...

What is the best way to structure an XML document?

After successfully cURLing the JSS Casper API in PHP and receiving a response in XML, I noticed that in the browser, the XML is displayed without any whitespace, all on one line. Here's an example of the XML data: <accounts> <users> ...

I have been working on creating a hangman game, and although I have figured out the logic behind it, I am experiencing an issue where it is not functioning properly. After inspect

I am currently working on a basic hangman game using only HTML and JavaScript. I have the logic in place, but it doesn't seem to be functioning correctly. When I inspected the element, it showed an error saying 'undefined toUppercase.' As a ...

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

I have a unique single-page JavaScript website that retrieves text from a web request in JSON format. The direction of the text (RTL or LTR) is only determined once the response is received. Is there a method to re-render the page after receiving the res ...

What causes my child element to be positioned with respect to the body even though its parent is set to relative positioning?

Here is the HTML code I am working with: <html> <head></head> <body> <div id="board"> <div class="person"></div> </div> </body> </html> And here is the ...

Preserve the information within

Recently, I encountered an issue with a file that generates HTML and adds it to a PHP string using a buffer. Here's the code snippet: <?php ob_start(); ?> <table> <tr> <td>Content</td> </tr> ...

CSS slideshow with automatic horizontal image transition that seamlessly restarts

I am facing an issue with my HTML & CSS automatic horizontal slideshow. Everything works fine, except for when the last image finishes sliding and the slideshow loops back to the first image, there is a sudden jump in the appearance of the first image. How ...

Using REST API and AngularJS to sign in to asp.net

After successfully implementing a login page in ASP.NET with AngularJS and REST API integration, I am now looking to add an auto-generated token for added security measures. How can I achieve this login operation in ASP.NET using AngularJS and REST API? ...

Generating Unique Random DIV IDs with JavaScript

Does anyone know of a JavaScript solution to generate unique random DIV IDs? I am currently using PHP for this purpose. <?php function getRandomWord($len = 10) { $word = array_merge(range('a', 'z'), range('A', &apos ...

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

What could be the reason for the unexpected invisibility of the 4px margin on a static div?

I have a straightforward situation where I am using a fixed positioning <div> that spans the entire width with 100% width. It is designed to have a margin of 4px on all sides. However, for some reason, the right side margin is not visible. Can someon ...

The absence of ellipses in Typography MUI is a glaring omission

I'm looking to truncate long text with an ellipsis, but it doesn't seem to be working. Is there something wrong with my code or how can we improve it? CODESANDBOX -----> CLICK HERE <Typography variant="body2" color="blac ...