What is the best way to align my text to the top of a div, rather than the bottom?

Currently, the text is displaying at the bottom. This is my code snippet:

<div class="container">
  <h1 class="text-center">Machine Learning and Development</h1>
  <div style="text-align: left;">
    <!-- <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video> -->
    <img src="https://via.placeholder.com/700x400?text=Placeholder+Video" />
  </div>
</div>

I intended for the text to be aligned correctly, but it appears misplaced. You can see the issue in this image:
https://i.sstatic.net/mKNau.png

Here are the links to my HTML and CSS:

htmlcssbootstrap-4

Answer №1

If you want the text "Machine Learning and Development" to appear above the video using flexbox, follow this example!

<div class="container">
  <h1 class="text-center">Machine Learning and Development</h1>
  <div style="text-align: left;">
    <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

Make sure to remove text-align: left from the div containing the video.

Answer №2

Take a look at the example below which is similar to yours:

<!DOCTYPE html>
<head>
    <style>
    img {
      float: left;
    }
    </style>
</head>

<body>
    <div class="container">
      <h1 class="text-center">Exploring the World of Artificial Intelligence</h1>
      <div>
        Welcome
        <!-- <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video> -->
        <img src="your_image_path_will_go_here" style="width:300px;height:300px;margin-left:15px;"/>
      </div>
    </div>
</body>

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

What is the best way to use a CSS class in my script specifically for specific screen sizes?

Utilizing bootstrap 4, my code is executing a for loop to generate eight divs with the class "item". To display five items per row, I am using the class "col-2". However, this results in six items being shown in a single row. Since I cannot include the o ...

javascriptjqueryhtmlcss

Tailwind CSS Sturdy Top Navigation Bar

I have been attempting to implement a Fixed Navigation Bar using Tailwind CSS and have the main page scroll with a sticky effect, but I'm encountering difficulties in getting it to function properly... Here is the current state of my progress: https ...

javascripthtmlcssvue.jstailwind-css

"Struggling with AngularJS nth-child not functioning properly within an ng-repeat loop

I've been working on changing the styling of every second row of content displayed on the page using ng-repeat. I managed to make it work for font color, however, I'm struggling with changing the background color. Below is my code. I would appre ...

cssangularjscss-selectors

Adjusting the height of each suggested item in Jquery autocomplete

I am currently facing an issue with the autocomplete input on my web app. The suggested list items have a height that is too small, making it difficult to select one item on a tablet using fingers. .ui-autocomplete.ui-widget { font-family: Verdana, Arial, ...

javascriptjquerycssautocompletejquery-ui-autocomplete

Request for "/media/img/image.png" was made using HTTP/1.1 but ended in a 404 error with a response size

Upon loading the page, there seems to be an issue with the image not appearing. The image was uploaded using Django-admin. Below is the section of the HTML template responsible for loading the image: Home.html <img class="card-img-top" src=&q ...

htmldjangodjango-admin

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Encountering an Issue with outerHTML in IE Browser If I try the following: txt = "Update Complete!"; msg = sub.appendChild(d.createElement("p")); msg.outerHTML = txt; It works without any problem. However, if I use: txt = "1 Error:<ul><li> ...

javascripthtmlinternet-explorerouterhtml

What is the process to transform a byte[] array into HTML code?

Utilizing a NameValueCollection for posting to a website has resulted in a response array that contains "\r\n" when converted to a string. To display this content on a page, I require pure HTML. Below is the code snippet: byte[] responseArray = ...

c#htmlasp.netpost

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

Implement a sliding effect for the navigation menu

I'm trying to figure out how to make this menu slide in when the hamburger menu is clicked. The background of the menu is an SVG, not just a shape. Does anyone have any suggestions or ideas on how I can achieve this effect? For reference, here is the ...

javascripthtmlcss

Various <a> elements adjust the HTML code based on the selected option

I am working with the following code snippet: <!-- LANGUAGE --> <div class="languages_box"> <span class="red">Languages:</span> <a href="#" class="selected"><img src="../images/au.gif" alt="" title="" border="0" he ...

javascriptphpjqueryhtmlajax

Is a persistent left border / divider only on the even-numbered items in the list?

I have a layout of list items arranged in 2 columns, separated by a bottom margin after every 'row' of 2 items. While it's simple to add a left border to every even list item... I am curious if it's achievable to extend the border so ...

htmlcssbordermultiple-columns

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

javascriptjqueryhtmlajaxmarko

Troubleshooting a MySQL problem with updating a large quantity of HTML content

I've integrated autosave functionality using Ajax into my content management system. However, I've encountered a problem. The issue arises when I test the system on my local server - the PHP side updates large amounts of data smoothly. But when I ...

phpmysqlhtml

Tips for maintaining the integrity of blank space within a text node?

When intercepting a paste event and cleaning HTML off of the content using textNodes, I am faced with an issue where all white space is reduced to a single space and new lines are disregarded. For example, pasting: "hello world !" ends up being "h ...

javascriptjqueryhtmlcssnodes

Is it acceptable to utilize a UUID as an HTML tag ID without encountering any problems?

I need to handle dynamic content accessible through an index on a side panel. When a user selects an element from the side panel, I use the ID to determine which data they're requesting so that I can generate the corresponding content for the main sec ...

jqueryhtmlperformancedomuuid

Creating a clickable image in the header of an R Shiny app

I've been attempting to create a hyperlink from the image output, but I'm encountering difficulties despite reviewing similar questions on Stack Overflow. svg with clickable links in shiny - not clickable The tags are not working. server.r li ...

htmlrhyperlinkshiny

Scroll down 1 page using Javascript and Jquery

Hey there! I'm looking to create a website where a small scroll on the mouse wheel will take the site to the next anchor. It's kind of hard to explain, but one good example is the Tesla Model 3 website on the US site here. Does anyone have any t ...

javascriptjqueryhtmlcss

Press the "Enter" key to automatically submit the form and validate the input

How can I make my form submit when the "enter" key is pressed? Currently, I have set the button type as "submit" so that the form is submitted when enter is pressed. However, I also want to call a function with validation and confirmation. Right now, it&ap ...

javascripthtml

Efficient Techniques to Eliminate Unwanted Jumping in CSS Transitions

I am currently working on a unique "stack" component that is inspired by the amazing ElastiStack. You can check out a cool demo of my work here. The demo works flawlessly on desktop Chrome, but unfortunately, I have encountered some issues with the transit ...

jqueryioscsscss-transitions

XAMPP's main directory

I have been struggling with this dilemma for quite some time, tirelessly searching for a solution. <img src="/images/test.jpg" /> This code snippet fetches an image from the root path, particularly in my case when it's live on a LAMP server. ...

phphtmlapachexampp