Tips for aligning text to the right and keeping it in line with another section

Question

Tips for aligning text to the right and keeping it in line with another section

I have a code snippet and I'm aiming to align the caption for my "DigDug" game directly below the game itself, perfectly lined up horizontally. The id for the caption is "#DigCaption" and the id for the game is "#DigDug". Could anyone provide guidance on achieving this alignment? Your assistance is greatly appreciated!

/*CSS file - Patrick White*/

body {
  width: 75%;
  margin: auto;
  /*vertical center*/
  font-size: 1em;
  font-weight: bold;
  font-family: "Century Gothic", Palatino, Georgia, Serif;
  color: #02849D;
  /*dark navy blue*/
  text-align: left;
  position: relative;
  background: url('../Images/Black_Rainbow.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  /*boxing, borders, and padding*/
  padding: 0.35em;
  border-style: double;
  border-color: #006E5F;
  min-width: 1200px;
  min-height: 950px;
}

body.video_games {
  min-height: 1030px;
}

h1 {
  font-family: Rockwell, Baskerville, Warnock, Serif;
  font-size: 225%;
  font-weight: bold;
  color: #02849D;
  text-align: center;
  padding: 1%;
  border-style: solid;
  border-color: #006E5F;
}

...

<!DOCTYPE html>
<html lang="en">
   <head>
      <link type="text/css" rel="stylesheet" href="Styles/MyStyle.css" media="screen">
      <link rel="icon" href="Images/favicon-16x16.png" type="image/png">
      <title>Web Portfolio: Patrick White's Video Games Page</title>
   </head>
   <body class="video_games">
  <div class="box" id="skipnav">
     <a href="#main">Skip to main content</a>
  </div>
  <h1>Video Games</h1>
  <div class="nav_menu">
     ...
   </body>
</html>

html css

Answer 1

Answer №1

When using jQuery UI, a .cropFrame element will be appended to #imgContainer for each crop frame. To target these elements, you can utilize the :nth-child() selectors. To select the first crop frame, you can use .cropFrame:not(:last-child), and for the last one, you would use .cropFrame:last-child.

$(function() {

  $("#choice1").on('change', function() {
    $("#elements").hide();
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

$(function() {

  $("#choice2").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({s
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

.cropFrame:not(:last-child) {
  border: 1px solid red;
}
.cropFrame:last-child {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://acornejo.github.io/jquery-cropbox/jquery.cropbox.css" rel="stylesheet"/>
<script src="https://acornejo.github.io/jquery-cropbox/jquery.cropbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<form>
  <div id='imgContainer'>
    <div id='elements'>
      <input type='file' id='choice1'>
    </div>
  </div>
  <input type='file' id='choice2'>
</form>

Answer 2

When using jQuery UI, a .cropFrame element will be appended to #imgContainer for each crop frame. To target these elements, you can utilize the :nth-child() selectors. To select the first crop frame, you can use .cropFrame:not(:last-child), and for the last one, you would use .cropFrame:last-child.

$(function() {

  $("#choice1").on('change', function() {
    $("#elements").hide();
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

$(function() {

  $("#choice2").on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      var $img = $('<img />').attr({s
        src: reader.result
      });

      $img.on('load', function() {
        $img.cropbox({
          width: 300,
          height: 300
        }).on('cropbox', function(event, results, img) {

        });
      });
      $('#imgContainer').append($img);
    };
    reader.readAsDataURL(file);
  });
});

.cropFrame:not(:last-child) {
  border: 1px solid red;
}
.cropFrame:last-child {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://acornejo.github.io/jquery-cropbox/jquery.cropbox.css" rel="stylesheet"/>
<script src="https://acornejo.github.io/jquery-cropbox/jquery.cropbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script>
<form>
  <div id='imgContainer'>
    <div id='elements'>
      <input type='file' id='choice1'>
    </div>
  </div>
  <input type='file' id='choice2'>
</form>

Tips for aligning text to the right and keeping it in line with another section

Answer №1

Similar questions

Image remains fluid within a static div without resizing

The line breaks in elements occur when the combined widths add up to 100%

steps for converting .SCSS files to .CSS in a project template

Implementing a dynamic loading strategy for Google reCAPTCHA based on language selection

What steps can I take to properly center and repair my web page that is currently a mess

Creating a Full Height Background Image with a Responsive Width Using Jquery

View the full desktop version of the website on your mobile device

What is the best method for swapping out an iframe with a div using Javascript?

Learn how to use jQuery to dynamically insert a table inside a div element in HTML, specifically for jQuery

What is the optimal HTML tag for showcasing chat text conversations?

The embed video is camouflaged within the bootstrap mobile display

"Utilizing Box elements, implementing linear gradients, styling with CSS, and

Implement Icon using CSS Class in jQuery Mobile

Identifying the HTML elements beneath the mouse pointer

Unable to retrieve HTML code with PHP's file_get_contents function

Ways to navigate a div within an iframe that has been loaded

jquery counter is malfunctioning

What is causing the div to not update until the for loop is completed?

I have noticed that the share buttons on Sharethis.com only show up after I resize the viewport

Are inline styles being utilized in a Styled component?