Aligning the logo in the center

I have been attempting to center this image, but so far I have not been successful. It seems that Bootstrap is pre-determining the position and I am unsure of how to disable it. Can anyone help me with this issue? Thank you.

      <div class="container">
             <div class="row">
                 <div class="col-md-5">
        <!--      <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
                   <br> </br>  
               <!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200"  </br> -->
                      <!--   <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
 margin-right: auto;" align="center" /> -->
                 <center>  <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>


               <br> </br>  

         </div>
       </div>
     </div>


     <div class="container">
         <div class="row">
             <div class=" col-md-12 well text-center">
                 <h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
               <p>
                   If you have forgot your password and would like to reset it please contact Jack </p>

               <input type="button" 
                      value="Request New Password" 
                      onclick="location='../forgot_password/forgot.php'" />




               </div>

             </div>
         </div>
htmlcsstwitter-bootstrap

Answer №1

Seems like the issue lies in the positioning of the image within the row. You may want to try using 

<center><img></center>
.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Image</h2>
  <p>The .img-responsive class allows the image to scale nicely within its parent element (resize the browser window to see the effect):</p>;        
  <center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>

</body>
</html>

Source

Answer №2

The use of img-responsive does not seem to be addressing the left alignment issue. Typically, content flows from left to right in a normal manner, resulting in the image being positioned accordingly. One way to center the image is by adding text-align: center; to its parent element or by directly applying some styling rules to the image itself. While it's preferable to create a separate class for this purpose, below is an example:

img {
  display: block;
  margin: 0 auto;
}

You can view an example at http://codepen.io/paulcredmond/pen/RGOKwr

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

Creating a collapsible accordion feature with jQuery using a specific HTML layout: wanna learn how?

I am looking to create an accordion effect with the structure provided below. The goal is to have the corresponding article toggle when clicking on .booklist>li>a, allowing only one article to be open at a time. Can someone assist me with writing thi ...

javascriptjqueryhtmlcss

Basic CSS3 animation

I seem to be having trouble making the transition effect work in this piece of code I want to change the text alignment from left to right, but it's not working. The code is very simple. <style> /* Default State */ div { background: green; ...

csstransition

What is the best method for extracting a text element within the HTML head using Selenium?

My challenge is to extract the file name of a jpg image from this link using Selenium with the Firefox driver. When I manually download the photo by right-clicking, the file name appears as 1-002.jpg Upon inspecting the HTML in Firefox, it indicates that ...

pythonhtmlseleniumfirefox

"Bootstrap is not aligning div md-6 as expected, instead it is sending it

Within my simple layout, I have 4 columns (col-lg3 col-md/sm-6 and col-xs-12). The display is straightforward, like this: https://i.sstatic.net/OyhNkm.png Everything functions perfectly when each column has a width of 3. However, when they adjust to md o ...

htmlcsstwitter-bootstrap

Issues with scaling background videos in HTML5

I'm having trouble making a video scale properly with the browser window while still covering the entire area. Does anyone know why my current approach isn't working? HTML: <div class="bgVideoWrap"> <video id="bgVideo" loop="true" aut ...

csshtml

arranged horizontally in a row html bootstrap

How can I place 2 horizontal cards next to each other? My current code overlaps the cards and creates a messy layout. I want the cards to be side by side like this: https://i.sstatic.net/s6225.png <div class="card-body p-0 d-flex justify-content-arou ...

htmlcssbootstrap-4

What is the best way to design a white arrow with a subtle touch of grey outlining?

Question: I am interested in creating a left-pointing arrow with a grey border. Currently, I have only managed to create a grey arrow without a border. Is there any way I can achieve this? Attached is a picture to illustrate what I'm looking for. An ...

htmlcss

Want to learn how to display a description below a photo when you hover over it in a photo gallery?

I am currently creating a basic photo gallery where hovering over a thumbnail displays an enlarged photo below it. My goal is to also have text displayed inside a white text box when hovering over each thumbnail, with unique descriptions for each. I need ...

javascripthtmlcss

Assistance required with extracting information from JSON format on a website

Seeking assistance in displaying the last 10 songs played on a web page using JSON data. The current code is not fetching and showing the requested information from the json file. https://jsfiddle.net/Heropiggy95/6qkv7z3b/ Any help in identifying errors ...

htmljson

I am looking to implement screen reader capabilities for both the select-2 combo box and bootstrap's datetime-picker. How can I go about doing

On my existing website, I have select-2 combo boxes for drop-down lists and a Bootstrap Calendar widget. While these features work well, they lack accessibility for users with disabilities. In an effort to make the website inclusive for everyone, I am work ...

javascripthtmlaccessibilityscreen-readersangular-bootstrap-calendar

Angular: merging object values into a single string by looping over them

i am dealing with the following data : "commercialRanges": [ { "rangeId": "700", "rangeName": "POSTPAID" }, { "rangeId": "500", "rangeName": "PREPAID" }, ] In my view, I am aiming to display the ...

htmlangularangular2-directivesngfor

Uniquely identifying elements in an array of div tags

I'm working with the following code snippet: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="htt ...

jqueryhtml

Automatically synchronize dynatable with AJAX requests and JSON responses

I'm currently facing a bit of confusion as my code appears to be functioning properly, but the table is not updating as expected. xD I am fetching data from my database and loading it into a table, aiming for it to automatically update every three se ...

javascriptphphtmlajaxjson

The IE condition is failing to work properly with .js and .css files

I've been trying to use this code to load the ie.css file specifically for IE browsers, but for some reason it's not working. I'm feeling a bit confused here - can anyone help me figure this out? <html> <head> <titl ...

htmlcssinternet-explorer

Border concealed by Bootstrap Glyphicons

Is there a reason why glyphicons hide a border of a floated container? Can anyone shed light on this issue and suggest a workaround? Check out this link for more information. https://i.sstatic.net/CXZSd.jpg My setup: OS X 10.11.1, Chrome 47.0.2526.73 (6 ...

htmlcsstwitter-bootstrap-3glyphicons

Iterating over selected checkboxes and setting custom styles in SCSS

As a beginner in SCSS, I am uncertain if it is possible to create a loop function that would compile the following code: I aim to apply certain CSS properties to specific elements when a particular input button is checked. My goal is to achieve this using ...

htmlcsssassstyling

Hover over the entire row to see it light up

I am trying to create a JavaScript function that loops through a variable number of iterations and dynamically generates HTML elements on the DOM / Webpage. Once the loop is complete, it populates the following div: <div class="energyRowContainer" id ...

jqueryhtmlcss

Extracting Values from JSON Array using Form Input Text

After designing a form for my web application, I encountered a situation where some fields needed to be populated with values from a JSON array retrieved from the treatment table in the database. {"treatment":[ { "id" : 1, "name" : "Leg Training" }, ...

javascripthtmljson

Is there a way to preserve the original color format without converting it to RGB

When applying a hsl color in JavaScript, it ends up being converted to RGB instead of staying as an HSL color. document.body.style.backgroundColor = "hsl(0,100%,50%)" document.body.style.backgroundColor; // "rgb(255, 0, 0)" I wanted to set an HSL color a ...

javascriptcsscolorsrgbhsl

Tips for dynamically adding a class when a specific section is scrolled to, and removing it when the section is passed

Is there a way to dynamically change the scroll behavior and add or remove a class based on certain conditions? I am new to coding, so any guidance would be greatly appreciated. Thank you! :) $(document).on("scroll", function () { ...

javascripthtmlcssjquery-events