HTML / CSS - 居中的图像行

Question

我很确定之前已经问过这个问题 - 但我对HTML / CSS还不太了解，并且无法将我的图片放到中心查看其他答案。< / p>

正如您在下图所示，我有一堆测试图像，我无法在他们自己的小列中居中。这可能很容易解决 - 有人知道它是什么吗？

以下是-pokemon-tab（图像中心）的代码，我在哪里添加样式以使其居中？ （对不起相同图像的10行 - 他们现在正在测试图像）

＆＃13;

＆＃13;

    <div class="col-md-4 col-md-offset-2" style="background-color:rgba(255,255,255,.8); padding-top: 10px;">
        <h2 style="text-align: center">-pokemon-</h2>
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">
        <img src="Spr_5b_289.png">

    </div>

＆＃13;

＆＃13;

＆＃13;

提前致谢

Answer 1

将text-center类添加到div。

<div class="col-md-4 col-md-offset-2" style="background-color:rgba(255,255,255,.8); padding-top: 10px;">
...
...
</div>

Answer 2

<img>是内联元素，因此受到简单text-align: center;的影响，该text-center也在名为<div class="col-md-4 col-md-offset-2> .... </div>的引导类中定义。

只需将此课程添加到 <div class="text-center col-md-4 col-md-offset-2" style="background-color:rgba(255,255,255,.8); padding-top: 10px;"> <h2 style="text-align: center">-pokemon-</h2> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> <img src="Spr_5b_289.png"> </div>

即可

＆＃13;

＆＃13;

@interface ConnectionManageriOS7 () <MCSessionDelegate, MCBrowserViewControllerDelegate>
{ 
    UILocalNotification *_expireNotification;
    UIBackgroundTaskIdentifier _taskId;
}

@property (nonatomic, strong) MCSession *session;
@property (nonatomic, strong) MCPeerID *localPeerID;

@property (nonatomic, strong) MCBrowserViewController *browserVC;
@property (nonatomic, strong) MCAdvertiserAssistant *advertiser;

@end

static ConnectionManageriOS7 *_manager = nil;

@implementation ConnectionManageriOS7

+ (ConnectionManageriOS7 *)connectManager {

    @synchronized([ConnectionManageriOS7 class]){

        if (_manager == nil) {
            _manager = [[ConnectionManageriOS7 alloc] init];
        }
        return _manager;
    }
    return nil;
}

- (id)init {

    self = [super init];
    if (self) {
        [self setupSessionAndAdvertiser];
    }
    return self;
}

- (void)setupSessionAndAdvertiser {

    _localPeerID = [[MCPeerID alloc] initWithDisplayName:[UIDevice currentDevice].name];;
    _session = [[MCSession alloc] initWithPeer:_localPeerID];
    _session.delegate = self;

}

- (void)connectWithDelegate:(id)delegate {

    _delegate = delegate;
    if (_session.connectedPeers.count) {
        if ([_delegate respondsToSelector:@selector(didConntectedWithManager:)]) {
            [_delegate didConntectedWithManager:self];
        }
    } else {
        if (_advertiser == nil) {
            _advertiser = [[MCAdvertiserAssistant alloc] initWithServiceType:VISUS_Service
                                                               discoveryInfo:nil
                                                                     session:_session];

            _isConnected = NO;

            [_advertiser start];
        }
        if (_browserVC == nil) {

            _browserVC = [[MCBrowserViewController alloc] initWithServiceType:VISUS_Service session:_session];
            _browserVC.delegate = self;

        }

        [(UIViewController *)delegate presentViewController:_browserVC
                                                   animated:YES completion:nil];
    }
}

- (void)sendMessage:(NSString *)message {

    NSData *textData = [message dataUsingEncoding:NSASCIIStringEncoding];
    NSLog(@"Send Data: %@", message);
    NSError *error = nil;
    [_session sendData:textData
               toPeers:_session.connectedPeers
              withMode:MCSessionSendDataReliable
                 error:&error];

    if (error) {
        //        
        [self session:_session peer:nil didChangeState:MCSessionStateNotConnected];
        NSLog(@"error %@", error.userInfo);
    }
}

- (void)stopService {

    NSLog(@"Stop Service");

    [_advertiser stop];
    _advertiser = nil;

    _browserVC = nil;
}

#pragma marks -
#pragma marks MCBrowserViewControllerDelegate
- (void) dismissBrowserVC{
    [_browserVC dismissViewControllerAnimated:YES completion:nil];
}
// Notifies the delegate, when the user taps the done button
- (void)browserViewControllerDidFinish:(MCBrowserViewController *)browserViewController {

    if ([_delegate respondsToSelector:@selector(didConntectedWithManager:)]) {
        [_delegate didConntectedWithManager:self];
    }

    [self dismissBrowserVC];
}

// Notifies delegate that the user taps the cancel button.
- (void)browserViewControllerWasCancelled:(MCBrowserViewController *)browserViewController{
    if (_browserVC == nil) {
        [browserViewController dismissViewControllerAnimated:YES completion:nil];
    }else {
        [self dismissBrowserVC];
    }
}

#pragma marks -
#pragma marks MCBrowserViewControllerDelegate

- (void)session:(MCSession *)session peer:(MCPeerID *)peerID didChangeState:(MCSessionState)state {

    if (state != MCSessionStateConnecting) {
        if (state == MCSessionStateConnected) {

            _isConnected = true;
            if ([_delegate respondsToSelector:@selector(willConntectedWithManager:)]) {
                [_delegate willConntectedWithManager:self];
            }
        }
        else {

            _isConnected = false;
            [self stopService];
            if ([_delegate respondsToSelector:@selector(didDisconntectedWithManager:)]) {
                [_delegate didDisconntectedWithManager:self];
            }
        }

    }

}

// Received data from remote peer
- (void)session:(MCSession *)session didReceiveData:(NSData *)data fromPeer:(MCPeerID *)peerID{
    //  Decode data back to NSString

    NSString *message = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];

    NSLog(@"Receive Data: %@", message);

    //  append message to text box:
    dispatch_async(dispatch_get_main_queue(), ^{
        if ([_delegate respondsToSelector:@selector(connectionManager:receivedString:)]) {
            [_delegate connectionManager:self receivedString:message];
        }
    });
}

- (void)session:(MCSession *)session didFinishReceivingResourceWithName:(NSString *)resourceName fromPeer:(MCPeerID *)peerID atURL:(NSURL *)localURL withError:(NSError *)error {

    _isConnected = false;
    [self stopService];
    NSLog(@"----- Error ----- %@", error.localizedDescription);

}

// Received a byte stream from remote peer
- (void)session:(MCSession *)session didReceiveStream:(NSInputStream *)stream withName:(NSString *)streamName fromPeer:(MCPeerID *)peerID {

}

// Start receiving a resource from remote peer
- (void)session:(MCSession *)session didStartReceivingResourceWithName:(NSString *)resourceName fromPeer:(MCPeerID *)peerID withProgress:(NSProgress *)progress {

}

- (void) session:(MCSession *)session didReceiveCertificate:(NSArray *)certificate fromPeer:(MCPeerID *)peerID certificateHandler:(void (^)(BOOL accept))certificateHandler
{
    certificateHandler(YES);
}


- (void) createExpireNotification
{
    [self killExpireNotification];

    if (_session.connectedPeers.count != 0) // if peers connected, setup kill switch
    {
        NSTimeInterval gracePeriod = 20.0f;

        // create notification that will get the user back into the app when the background process time is about to expire
        NSTimeInterval msgTime = UIApplication.sharedApplication.backgroundTimeRemaining - gracePeriod;
        UILocalNotification* n = [[UILocalNotification alloc] init];
        _expireNotification = n;
        _expireNotification.fireDate = [NSDate dateWithTimeIntervalSinceNow:msgTime];
        _expireNotification.alertBody = @"Bluetooth Connectivity is about to disconnect. Open the app to resume Test";
        _expireNotification.soundName = UILocalNotificationDefaultSoundName;
        _expireNotification.applicationIconBadgeNumber = 1;

        [UIApplication.sharedApplication scheduleLocalNotification:_expireNotification];
    }
}

- (void) killExpireNotification
{
    if (_expireNotification != nil)
    {
        [UIApplication.sharedApplication cancelLocalNotification:_expireNotification];
        _expireNotification = nil;
    }
}

- (void)bacgroundHandling {

    _taskId = [[UIApplication sharedApplication] beginBackgroundTaskWithExpirationHandler:^
               {
                   [self stopService];
                   [[UIApplication sharedApplication] endBackgroundTask:_taskId];
                   _taskId = UIBackgroundTaskInvalid;
               }];
    [self createExpireNotification];

}

- (void)advertiser:(MCNearbyServiceAdvertiser *)advertiser didReceiveInvitationFromPeer:(MCPeerID *)peerID withContext:(NSData *)context invitationHandler:(void(^)(BOOL accept, MCSession *session))invitationHandler
{

    // http://down.vcnc.co.kr/WWDC_2013/Video/708.pdf  -- wwdc tutorial, this part is towards the end (p119)

   // self.arrayInvitationHandler = [NSArray arrayWithObject:[invitationHandler copy]];
    // ask the user
    UIAlertView *alertView = [[UIAlertView alloc]
                              initWithTitle:peerID.displayName
                              message:@"Would like to create a session with you"
                              delegate:self
                              cancelButtonTitle:@"Decline" otherButtonTitles:@"Accept", nil];
    [alertView show];


}

- (void) alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    // retrieve the invitationHandler and  check whether the user accepted or declined the invitation...

    BOOL accept = (buttonIndex != alertView.cancelButtonIndex) ? YES : NO;

    // respond
    if(accept) {
//        void (^invitationHandler)(BOOL, MCSession *) = [self.arrayInvitationHandler objectAtIndex:0];
//        invitationHandler(accept, self.mySession);
    }
    else
    {
        NSLog(@"Session disallowed");
    }
}

- (void)terminate {

    [self killExpireNotification];
    [self stopService];
}
@end

＆＃13;

＆＃13;

＆＃13;

此代码段不起作用，因为它不包含引导程序的预定义CSS规则，但复制它应修复它。

Answer 3

你有没有尝试过

text-align: center 

在容器上？

Answer 4

<style>
.col-md-4 col-md-offset-2{
width:90%;
margin:0 5%;
display:block;
float:left;
}
.col-md-4 col-md-offset-2 img{
dispaly:block;
text-align:center;
}

</style>